[Web] CSR & SSR

CSR과 SSR은 웸 애플리케이션의 프론트엔드 렌더링 방식에 대한 두 가지 주요 접근 방식이다.

 

SSR(Server Side Rendering)

SSR은 서버 측에서 웹 애플리케이션의 초기 렌더링을 담당하는 방식이다.

클라이언트에서 요청이 들어올 때마다 서버에서 view 를 만들어서 제공한다.

장점

• 검색 엔진 최적화(SEO) : 서버에서 초기 렌더링을 수행하므로 검색 엔진 크롤러에게 콘텐츠를 쉽게 이해할 수 있는 HTML을 제공할 수 있다.
• 초기 로딩 성능 개선 : 첫 번째 페이지 로딩 시 서버에서 렌더링된 HTML을 클라이언트로 전달하므로 초기 로딩 성능이 개선된다.
  
  

단점

• 프로젝트 복잡도 : 라우터를 사용하다보면 복잡도가 높아질 수 있다.
• 성능 악화 가능성 : 매번 서버에서 렌더링을 수행하면 서버 자원을 많이 사용할 수 있으며, 성능 저하 가능성이 있다.

 

CSR(Client Side Rendering)

CSR은 클라이언트 측에서 웹 애플리케이션의 뷰 렌더링을 담당하는 방식이다.

사용자의 행동에 따라 필요한 부분만 다시 읽어오며, 서버는 JSON 파일만 보내주고 HTML을 구성하는 것은 자바스크립트가 클라이언트 측에서 수행한다.

장점

• 트래픽 감소 : 전체 페이지를 다시 불러오지 않고도 필요한 데이터만 받아올 수 있으므로 네트워크 트래픽이 감소한다.
• 사용자 경험 : 페이지 새로고침 없이 동적으로 데이터를 업데이트할 수 있어 사용자 경험이 향상된다.
  
  

단점

• 검색 엔진 최적화(SEO) 어려움 : 초기 HTMl이 비어있거나 최소한의 내용만 포함되므로 검색 엔진 크롤러가 페이지 콘텐츠를 제대로 수집하지 못할 수 있다. (구글은 자바스크림트 엔진을 내장하고 있어서 CSR을 처리할 수 있다.)
• 초기 로딩 성능 : 첫 번째 페이지 로딩 시 전체 페이지에 대한 모든 문서 파일을 요청하기 때문에 SSR 보다 로딩이 느리다.

 

SPA(Single Page Application)

최초 한 번 페이지 전체를 로딩한 뒤, 데이터만 변경하여 사용할 수 있는 애플리케이션으로 기본적으로 페이지 로드가 없고, 모든 페이지가 단순히 HTML5 History에 의해 렌더링된다. 주로 CSR을 이용하여 구현하며 검색 엔진 최적화를 고려해 SSR을 추가로 구현하기도 한다.

 

 

 

[참고] https://gyoogle.dev/blog/web-knowledge/CSR%20&%20SSR.html

https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8