SSR과 CSR

SSR (Server Side Rendering)

: 유저의 새로운 요청이 있을 때마다 server로부터 렌더링 준비가 완료된 정적 리소스를 다운로드 받아 그리는 방식.
렌더링 준비를 모두 마친 html과 js를 다운받아 client에서는 js와 html을 연결시킨다.

장점

• 첫 화면을 보는 시간이 짧다.
  (TTV : TimeToView 가 짧다)
• SEO가 효율적이다.

단점

• 매번 server로부터 새로 받아와서 렌더링하기 때문에 서버과부화 문제가 있다.
• 동적인 부분을 바로 처리하기 어렵다.
  (TTI : TimeTo Interact 가 길다.)

SSR을 사용하는 것이 좋은 경우

• 네트워크가 느린 경우 / 최초 로딩이 빨라야 하는 경우.
  (CSR보다 화면을 불러오는 시간이 짧기 때문에 유저의 기다리는 시간 또한 비교적 짧다)
• SEO가 필요한 경우.
• 사용자와의 상호작용이 많이 필요하지 않은 경우.
• 항상 최신의 상태를 유지해야하는 경우.
  (분석 차트, 관리자 페이지, 예약 시스템 등)

CSR (Client Side Rendering)

: Server로부터 정적 리소스를 한꺼번에 모두 다운로드 받아, Client에서 직접 렌더링 준비 후 html을 그리는 방식.
html을 먼저 받고 연결된 js링크를 다운 받아 client에서 동적 dom 생성

장점

• url이 바뀌더라도 html을 다시 내려받지 않기 때문에 화면 깜빡임(리렌더링)없이 (빠르게)볼 수 있다.
• 서버 과부화 문제가 없다.

단점

• 사용자가 첫 화면을 보는 시간이 늦다.
  (TTV : TimeToView 가 길다)
• SEO 대응이 힘들다.

CSR을 사용하는 것이 좋은 경우

• 네트워크가 빠른 경우 / 서버의 성능이 좋지 않은 경우
• 검색 엔진에 노출될 필요가 없는 경우.(SEO가 필요 없는 경우)
• 유저와의 상호작용이 많은 사이트의 경우.
  (TTI : TimeTo Interact 가 짧다.)
• 사용자에게 보여줘야 할 데이터의 양이 많은 경우.

REACT의 경우 CSR 방식으로 동작하는데, 라이브러리(NextJS, Gatsby)를 사용하거나 Prerender io를 사용함으로써 SEO 문제 개선 및 초기 로딩 속도 보완이 가능하다.

이러한 방식으로 만든 페이지를 SSG(Statice Site Generation)이라고 한다. SSG의 경우 회사 소개 페이지와 같이 모든 유저에게 항상 동일한 화면을 보이는 경우 사용하기 적합하다.
(ex 제품목록, 도움말, 블로그 등)