CSR and SSR

CSR & SSR

CSR : Client Side Rendering
SSR : Server Side Rendering

CSR은 모바일시대에 들어, SAP와 함께 등장했다

SPA(Single Page Applictaion)

먼저 페이지 전체를 로드한 후, 데이터만 변경하며 사용 가능한 애플리케이션

 

SPA는 기본적으로 페이지로드가 없이, 모든 페이지가 간단하게 Html5 HIstory에 의해 랜더링 된다.
기존의 SSR방식에는 성능의 문제가 있었다.

최근에는 웹에서 제공되는 정보가 많은 반면 요청할 때마다 데이터를 읽어 들여, 

페이지를 로드할 때마다 서버에서 자원을 넘겨받아 분석해, 

화면에 랜더링 하는 방식인 SSR은 데이터가 많을수록 성능에 문제가 발생했다

이러한 문제점은 인터랙션이 많은 환경에서는 비효율적이다. 

랜더링을 서버에서 하게 되면, 그만큼 서버의 자원이 사용되기 때문에 불필요한 트래픽이 발생한다.

CSR방식은 유저의 행동에 의해 필요한 부분만 다시 읽어 들인다. 

따라서 서버 측에서 랜더링을 해서, 모든 정보를 표시하는 것보다 빠른 인터랙션을 기대할 수 있다. 

서버는 JSON 파일만 송신하여 HTML을 작성하는 것은 JavaScript을 통해 클라이언트 측에서 진행하는 방식이다.

화면 랜더링을 유저의 브라우저가 담당하며, 먼저 웹애플리케이션을 브라우저에 로드한 다음, 필요한 데이터만 읽어 들여 표시하는 CSR은 트래픽을 감소시켜 유저에게 좋은 경험을 제공할 수 있다

CSR 장점과 단점

장점

트래픽감소

필요한 부분만 읽어 들임

 

유저경험

화면새로고침 없음. 유저가 네이티브 애플리케이션과 같은 경험을 받음

 

초기로딩 성능 개선

최소한의 데이터만 처음에 화면에 표시

단점

검색엔진의 크롤러가 데이터를 수집하기 어려움

구글의 검색엔진은 JavaScript엔진이 내장되어 있어,

그 외의 검색엔진은 크롤링에 어려움이 있어 SSR을 별도로 구현해야 하는 번거로움이 있음

SSR 장점과 단점

장점

검색엔진 최적화

모든 데이터를 처음부터 화면에 표시하기 때문에, 검색에 용이함

단점

성능악화의 가능성

매번 자료를 읽어 들임