SSR vs. CSR

SSR(Server Side Redering)

• 정의: 콘텐츠를 서버 측에서 렌더링하는 방식
• 동작순서
  1. 클라이언트는 서버에 페이지를 요청한다.
  2. 서버는 필요한 데이터를 가져와 HTML, CSS로 완전한 문서를 만들고 클라이언트로 전달한다.
  3. 클라이언트는 서버로부터 받은 페이지를 로드하고 JS를 다운로드 받는다.
  4. JS가 다운로드된 후 사용자는 웹페이지와 상호작용이 가능해진다.
  (3~4번 과정에서 React, Vue, Angular 등을 사용하는 모던 SSR에서는 Hydration 과정이 일어난다.)
• 장점
  1. 초기 로딩 속도가 빠르다.
  2. SEO 최적화에 좋다.
• 단점
  1. 화면 깜빡임
  2. 서버 과부하
  3. TTV(Time to view)와 TTI(Time to interact)의 시간차 발생

CSR(Client Side Redering)

• 정의: 콘텐츠를 클라이언트 측에서 렌더링하는 방식
• 동작순서
  1. 클라이언트가 서버에 페이지를 요청한다.
  2. 서버는 HTML, CSS가 준비된 뼈대만 있는 문서와 JS 번들을 클라이언트로 전달한다.
  3. 클라이언트는 빈 페이지를 렌더링하고 JS 번들을 다운로드 받는다.
  4. JS 번들이 실행되고 API를 비동기적으로 실행해서 데이터를 가져오고 동적으로 DOM을 그린다.
  5. 사용자는 웹페이지와 상호작용이 가능해진다.
• 장점
  1. 페이지 이동 시 부드러움
  2. 초기 페이지 로딩 후 바로 웹페이지와 인터랙션 가능
  3. 서버 부하 감소
• 단점
  1. 초기 로딩 속도가 느림
  2. SEO 불리