**Partial Prerendering(PPR)**은 단일 페이지에서 정적 콘텐츠와 동적 콘텐츠를 결합하는 Next.js 렌더링 모델입니다. 즉각적인 정적 셸을 제공하면서 동적 부분을 스트리밍합니다. SSG와 SSR 사이의 오래된 전부 아니면 전무(all-or-nothing) 경계를 흐립니다.
전통적으로 페이지는 완전 정적(빠르지만 사용자별 콘텐츠 불가)이거나 완전 동적(개인화 가능하지만 느리고 캐싱 불가)이었습니다. 실제 페이지는 혼합입니다: 상품 페이지는 정적 레이아웃/설명을 갖지만 동적 장바구니 수와 개인화된 추천을 가집니다. PPR은 같은 페이지가 둘 다이게 합니다.
import { Suspense } from "react";
export default function ProductPage() {
return (
<main>
<Header /> {/* 정적 — 미리 렌더링, CDN에서 즉시 제공 */}
<ProductInfo /> {/* 정적 — 모두에게 동일 */}
<Suspense fallback={<CartSkeleton />}>
<CartCount /> {/* 동적 — 요청마다 스트리밍 */}
</Suspense>
<Suspense fallback={<RecsSkeleton />}>
<Recommendations /> {/* 동적 — 개인화, 스트리밍 */}
</Suspense>
</main>
);
}
핵심 아이디어: <Suspense> 경계 바깥의 모든 것은 빌드 시점에 정적 셸로 미리 렌더링됩니다. Suspense 안에 있는 것(동적 데이터 — 쿠키, 헤더, 캐싱되지 않은 fetch — 을 읽는)은 요청 시점에 스트리밍되는 동적 "구멍"으로 취급됩니다.
1. 정적 셸 (헤더, 상품 정보, 스켈레톤) → 엣지/CDN에서 즉시 제공
2. 동적 구멍 (장바구니, 추천) → 스트리밍되어 스켈레톤을 교체
사용자는 의미 있는 첫 페인트를 즉시 얻고(CDN의 정적 셸), 그다음 개인화된 조각이 채워집니다. 최상의 양쪽 모두: 정적 속도 그리고 동적 콘텐츠를, 별도의 routing이나 렌더링 모드 결정 없이.
PPR은 실험적/점진적 기능이었습니다; 설정/라우트별로 활성화하세요.
Next.js 버전을 확인하세요 — API와 안정성이 계속 진화해 왔습니다.
PPR은 "빠르지만 정적" 대 "동적이지만 느린"의 잘못된 선택을 제거합니다. 셸을 미리 렌더링하고 동적 구멍(Suspense로 표시된)만 스트리밍함으로써, 단일 페이지가 CDN처럼 즉각적인 첫 페인트와 개인화된 콘텐츠를 모두 전달합니다. 페이지를 분할하거나 SSG vs SSR을 수동으로 고르지 않고 자동으로요.
이는 Next.js 렌더링이 향하는 방향을 대표합니다: 세밀하고 컴포넌트별인 정적/동적 조합.