Next.js SSR vs 정적 생성 vs ISR — 선택 기준과 코드 비교

Next.js의 세 가지 렌더링 전략인 SSR, SSG, ISR을 코드 예시와 함께 비교한다. 어떤 상황에서 어떤 전략을 선택해야 하는지 명확한 기준과 getStaticProps + revalidate 구현 코드를 제시한다.

핵심 포인트

상세 정리

SSR 작동 방식: getServerSideProps에서 요청마다 서버가 HTML을 생성한다. 항상 최신 데이터를 보장하지만 매 요청이 서버를 거쳐 TTFB가 길고 서버 부하가 크다.
SSG 작동 방식: getStaticProps에서 빌드 시점에 HTML을 미리 생성한다. CDN에 캐싱되어 전 세계 어디서나 빠르게 제공된다. 데이터는 빌드 시점 기준이다.
SSG의 3가지 장점: CDN 캐시로 일관된 성능 확보, 백엔드 다운 시에도 기존 정적 페이지 서비스 유지, 매 요청마다 DB 조회 불필요로 서버 부하 감소.
ISR 구현: getStaticProps에서 revalidate: 60을 반환하면 60초마다 백그라운드에서 페이지를 재생성한다. 사용자는 항상 캐시된 버전을 즉시 받고 재생성은 비동기로 진행된다.
전략 선택 기준: 정적 콘텐츠(마케팅/블로그/문서)는 SSG, 자주 변경되는 데이터(상품 목록/뉴스)는 ISR, 사용자별 맞춤 데이터(대시보드/프로필)는 클라이언트 사이드 fetching.
최종 권장: 기본적으로 Static Generation + ISR로 성능을 확보하고, 반드시 실시간 데이터가 필요한 경우에만 SSR을 선택한다.
가용성 우위: SSG는 백엔드가 다운돼도 CDN에 캐시된 이전 버전을 계속 서비스할 수 있어 서비스 가용성이 높다.

왜 읽나Next.js 프로젝트에서 SSR/SSG/ISR 전략을 선택해야 할 때 명확한 판단 기준과 getStaticProps + revalidate 코드 구현이 필요한 프런트엔드 엔지니어에게 유용하다.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

읽음 (0)

이 글과 비슷한