CSR vs SSR

CSR과 SSR 에서의 Rendering이란,
HTML 파일 안에 내용이 있을 때를 말한다.

• SPA (Single Page Application)
  : 한 페이지 내에서 필요한 데이터를 받아와서 부분적으로 업데이트
• TTV (Time to View)
  : 사용자가 볼 수 있는 시간
• TTI (Time to Interact)
  : 사용자가 동적 기능(링크이동 등)을 사용할 수 있는 시간
• SSG (Static Site Generation)
  : 정적인 웹페이지 미리 생성 → 서버 배포 → 동적 요소 JS 추가 가능

---

• CSR (Client Server Rendering)
  • 최초 빈화면에서 동적으로 HTML 생성하여 화면 노출하여 클라이언트에서 렌더링
  • 첫 페이지 노출까지의 로딩 느림.
  • 낮은 효율성의 SEO
  • 서버에서 빈 index 가져옴 → 모든 로직이 담긴 JS 요청 → TTV/TTI 동시 가능
• SSR (Server Server Rendering)
  • 서버에서 HTML 받아와서 노출
  • 효율적인 SEO
  • 깜빡임 등의 나쁜 UX, 서버 과부화 위험성
  • 서버에서 완성된 index 가져옴 (TTV) → 동적 기능 JS 요청 → TTI 가능