[Next.js] CSR, SSG, ISR, SSR의 차이점과 장단점

요약

CSR(Client-Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration), SSR(Server-Side Rendering)은 웹 애플리케이션의 렌더링 방식에 따라 구분되는 개념입니다.
각각의 방식은 장단점이 있으며, 웹 애플리케이션의 특성에 따라 적절한 방식을 선택해야 합니다.

---

CSR (Client-Side Rendering)

• 정의: 클라이언트(브라우저)에서 JavaScript를 실행하여 HTML을 생성하는 방식
• 장점:
  • 빠른 초기 로딩 속도
  • 서버 부하 감소
  • 동적인 UI 구현 용이
• 단점:
  • 초기 로딩 시 JavaScript 파일 다운로드 필요
  • SEO 최적화 어려움
  • 자바스크립트 의존성 높음
  • 보안 취약점 존재

SSG (Static Site Generation)

• 정의: 빌드 시점에 HTML 파일을 생성하여 제공하는 방식
• 장점:
  • 빠른 초기 로딩 속도
  • SEO 최적화 용이
  • 서버 부하 감소
• 단점:
  • 콘텐츠 변경 시 재배포 필요
  • 동적 콘텐츠 처리 어려움

ISR (Incremental Static Regeneration)

• 정의: SSG와 유사하지만, 일정 시간 간격으로 정적 페이지를 자동으로 재생성하는 방식
• 장점:
  • SSG의 장점 + 동적 콘텐츠 처리 가능
  • 콘텐츠 변경 시 즉시 반영 가능
• 단점:
  • 복잡한 구현 과정
  • 서버 부하 증가 가능

SSR (Server-Side Rendering)

• 정의: 서버에서 HTML을 생성하여 클라이언트에 전달하는 방식
• 장점:
  • 빠른 초기 로딩 속도
  • SEO 최적화 용이
  • 동적 콘텐츠 처리 가능
• 단점:
  • 서버 부하 증가
  • 보안 및 캐싱 관리 복잡
  • 개발 및 배포 과정 복잡

이와 같이 각 렌더링 방식은 장단점이 있으며, 웹 애플리케이션의 특성에 따라 적절한 방식을 선택해야 합니다. 예를 들어 정적 콘텐츠가 많은 경우 SSG가 적합하고, 동적 콘텐츠가 많은 경우 SSR이 적합할 수 있습니다. 또한 Next.js와 같은 프레임워크를 사용하면 이러한 렌더링 방식을 쉽게 구현할 수 있습니다.

참고자료

[1] GitBook - CSR vs SSR vs SSG | 콥 노트 (Link)
[2] 티스토리 - 이제는 알아야겠다! CSR과 SSR의 차이점과 장단점 (SPA, MPA ... (Link)
[3] velog - SSG / SSR / ISR / CSR 차이 (Link)
[4] velog - CSR, SSR, SSG 각각의 특징과 차이점 (Link)
[5] velog - SSG / SSR / ISR / CSR 차이 (Link)
[6] velog - [Next js] SSR, SSG, ISR 이해하기 (Link)
[7] enjoydev.life - Next.js의 렌더링 방식 이해하기 - SSR, SSG, ISR (Link)
[8] 티스토리 - CSR, SSG, ISR, SSR 네 가지 렌더링 기법의 특징과 장단점 (Link)