앱에 맞는 최적의 렌더링 전략 선택 가이드

앱의 목적과 콘텐츠 특성에 따라 SSG, ISR, SSR, CSR, PPR 중 최적의 렌더링 전략을 선택하는 방법을 정리한 가이드다. 전략마다 빌드 시간, TTFB, LCP, 데이터 신선도, 서버 연산, 인터랙티비티 트레이드오프가 다르므로, 하나의 앱에서도 페이지별로 혼합 사용하는 것이 최선이다.

핵심 포인트

SSG는 빌드 시 정적 HTML을 생성해 엣지에서 캐싱 — TTFB와 LCP가 가장 빠르지만 재배포 없이 데이터 갱신 불가
ISR은 특정 페이지만 배포 없이 주기적으로 재생성 — 대규모 사이트에서 전체 재빌드 비용 절감
SSR은 요청마다 서버에서 HTML 생성 — 실시간 개인화·SEO 모두 지원하지만 서버 연산 비용이 높다
CSR은 브라우저에서 JS로 렌더링 — 인터랙티비티 최고지만 초기 로드 느리고 SEO에 불리
PPR(실험적)은 정적 셸을 먼저 제공하고 동적 부분을 React Suspense로 스트리밍 — SSG 속도와 SSR 개인화를 동시에 제공

상세 정리

SSG 적합 케이스: 마케팅 랜딩 페이지, 블로그, 제품 카탈로그처럼 콘텐츠 변경이 드문 페이지. 빌드 후 엣지 캐싱으로 서버 연산 없음.
ISR 적합 케이스: 수천~수백만 개 제품 페이지처럼 빌드가 너무 오래 걸리는 대규모 정적 사이트. revalidate 주기를 분 단위로 설정해 최신성 유지.
SSR 적합 케이스: 검색 결과, 개인화 추천, 실시간 재고처럼 요청마다 다른 데이터가 필요한 페이지. 쿠키·헤더·세션 기반 분기도 가능.
CSR 적합 케이스: 장바구니, 대화형 차트, SaaS 대시보드처럼 SEO 불필요하고 인터랙션이 핵심인 컴포넌트.
혼합 전략 이커머스 예시: 레이아웃은 SSG, 상품 목록은 ISR, 검색·추천은 SSR, 장바구니는 CSR로 분리 — 단일 앱 내 4가지 전략 공존.
혼합 전략 대시보드 예시: 문서는 SSG, 정기 리포트는 ISR, 실시간 시각화는 SSR, 인터랙티브 도구는 CSR.
성능 매트릭스: TTFB는 SSG가 가장 빠르고 CSR이 가장 느림. 데이터 신선도는 SSR·CSR이 최상. 서버 연산은 SSG 없음에서 SSR 높음까지 분포.
PPR(실험적): React Suspense 경계로 정적 셸을 즉시 전송하고 동적 부분만 스트리밍 — SSG 캐싱 장점과 SSR 실시간 데이터를 결합.
선택 기준 요약: 콘텐츠 변경 빈도, SEO 필요 여부, 인터랙티비티 수준, 서버 비용 허용 범위 4가지를 기준으로 판단.

왜 읽나렌더링 전략 선택에서 혼란을 겪거나 페이지별 최적화를 처음 설계하는 Next.js 프론트엔드·풀스택 엔지니어.

Vercel Blog 블로그

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

원문 읽기

읽음 (0)

·takedown 요청

앱에 맞는 최적의 렌더링 전략 선택 가이드

이 글과 비슷한

Chat SDK의 Discord Components V2 지원 추가

Flags SDK, 플래그 평가 속도 10배 개선

AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기