본문으로 건너뛰기

SSG, CSR, SSG

작성일 : 2025.01.18

Next.js는 React 기반의 프레임워크로, 다양한 렌더링 방식을 제공합니다. 각각의 렌더링 방식은 고유한 특징과 장단점을 가지고 있어, 상황에 따라 적절한 방식을 선택하는 것이 중요합니다.

SSR(Server-Side Rendering)​

서버 사이드 렌더링은 서버에서 페이지를 완전히 렌더링한 후, 클라이언트에게 전달하는 방식입니다. 사용자가 페이지를 요청하면 서버는 React 컴포넌트를 실행하여 HTML을 생성하고, 이를 클라이언트에 전송합니다. 클라이언트는 받은 HTML에 JavaScript를 연결하는 hydration 과정을 거쳐 완전한 인터랙티브 페이지로 만듭니다.

SSR의 장점​

  • 검색엔진 최적화(SEO)가 중요한 페이지에 적합
  • 초기 페이지 로딩이 빠름
  • 소셜 미디어 공유 시 미리보기 제공이 용이
  • Time to First Contentful Paint(FCP)가 빠름

SSR의 단점​

  • 서버 자원을 많이 사용
  • 페이지 전환 시 전체 페이지를 다시 로드해야 함
  • Time to Interactive(TTI)가 CSR에 비해 늦을 수 있음

CSR(Client-Side Rendering)​

클라이언트 사이드 렌더링은 브라우저에서 JavaScript를 통해 페이지를 렌더링하는 방식입니다. 서버는 최소한의 HTML과 JavaScript 파일만 전송하고, 실제 페이지 렌더링은 클라이언트의 브라우저에서 이루어집니다.

CSR의 장점​

  • 서버 부하가 적음
  • 빠른 페이지 전환
  • 풍부한 사용자 인터랙션 구현이 용이
  • SPA(Single Page Application) 구현에 적합

CSR의 단점​

  • 초기 로딩 시간이 길 수 있음
  • SEO가 어려움
  • 자바스크립트가 비활성화된 환경에서 작동하지 않음

SSG(Static Site Generation)​

정적 사이트 생성은 빌드 시점에 페이지를 미리 생성하여 정적 파일로 제공하는 방식입니다. 모든 사용자가 동일한 내용을 보게 되며, 매우 빠른 로딩 속도를 제공합니다.

SSG의 장점​

  • 매우 빠른 페이지 로딩
  • 서버 부하가 거의 없음
  • CDN 활용이 용이
  • 높은 보안성

SSG의 단점​

  • 동적 콘텐츠 처리가 어려움
  • 빌드 시간이 길어질 수 있음
  • 실시간 데이터 반영이 어려움

실제 적용 사례​

각 렌더링 방식은 페이지의 특성과 요구사항에 따라 적절히 선택되어야 합니다. 다음은 일반적인 적용 사례입니다:

SSR 적용 케이스​

  • 전자상거래 상품 상세 페이지
  • 실시간 데이터를 보여주는 뉴스 사이트
  • 소셜 미디어 피드

CSR 적용 케이스​

  • 관리자 대시보드
  • 실시간 채팅 애플리케이션
  • 사용자 설정 페이지

SSG 적용 케이스​

  • 회사 소개 페이지
  • 기술 문서
  • 블로그 포스트
  • 마케팅 랜딩 페이지

결론​

Next.js의 다양한 렌더링 방식은 각각의 장단점이 있으며, 하나의 애플리케이션 내에서도 페이지별로 다른 렌더링 방식을 적용할 수 있습니다. 프로젝트의 요구사항과 각 페이지의 특성을 고려하여 적절한 렌더링 방식을 선택하는 것이 중요합니다. Next.js는 이러한 유연성을 제공함으로써 최적화된 웹 애플리케이션을 구축할 수 있게 해줍니다.