CSR vs SSG vs ISR vs SSR

1.  CSR

• Client Side Rendering
• 렌더링 하는 주체가 브라우저
• 장점
  • 한번 로딩 되면, 빠른 UX 제공
  • 서버의 부하가 작음
• 단점
  • 페이지 로딩 시간 (TTV)이 길다
  • 자바스크립트 활성화가 필수
  • SEO 최적화가 힘듬
  • 보안에 취약함
  • CDN(Content Delivery Network)에 캐시가 안 됨

 2. SSG

• Static Site Generation
• 렌더링하는 주체자가 서버, 빌드할 때 렌더링
• 장점
  • 페이지로딩 시간( TTV)이 빠름
  • 자바스크립트 필요 없음
  • SEO 최적화가 좋음
  • 보안이 뛰어남
  • CDN 캐시가 됨
• 단점
  • 데이터가 정적임
  • 사용자별 정보 제공이 어려움

3. ISR

• Incremental Static Regeneration
• 렌더링하는 주체자가 서버, 주기적으로 렌더링
• SSG와 동일한 원리,
• 단, 정해진 주기에 따라 페이지를 다시 생성함
• 장점
  • 페이지로딩 시간( TTV)이 빠름
  • 자바스크립트 필요 없음
  • SEO 최적화가 좋음
  • 보안이 뛰어남
  • CDN 캐시가 됨
  • 데이터가 주기적으로 업데이트 됨
• 단점
  • 실시간 데이터가 아님
  • 사용자별 정보 제공의 어려움

4. SSR

• Server Side Rendering
• 렌더링하는 주체자가 서버, 요청시 렌더링
• 장점
  • 페이지로딩 시간( TTV)이 빠름
  • 자바스크립트 필요 없음
  • SEO 최적화가 좋음
  • 보안이 뛰어남
  • 실시간 데이터를 사용
  • 사용자별 필요한 데이터를 사용함
• 단점
  • 비교적 느릴 수 있음
  • 서버의 과부하가 걸릴 수 있음
  • CDN에 캐시가 안 됨