Next.js 15 PPR 프로덕션 도입 사례 분석 — 실전 Partial Prerendering 효과

Partial Prerendering(PPR)은 한 페이지 내에서 정적 부분과 동적 부분을 함께 렌더링하는 Next.js 15 안정화 기능입니다. 프로덕션 도입 사례로 실전 효과를 정리합니다.

PPR 기본 개념

• 정적 쉘 선반환: 페이지 껍데기(헤더·푸터·레이아웃) 즉시 전달
• 동적 영역은 스트리밍: 개인화·실시간 데이터는 Suspense로 점진 렌더
• 결과: TTFB 정적 수준 + 동적 콘텐츠 유연성

// app/products/[id]/page.tsx
export const experimental_ppr = true

export default function Page({ params }) {
  return (
    <main>
      <StaticHeader />
      <Suspense fallback={<Skeleton />}>
        <DynamicRecommendations userId={params.id} />
      </Suspense>
      <StaticFooter />
    </main>
  )
}

실전 사례: 이커머스 상품 상세 페이지

기존(App Router SSR)

• TTFB: 480ms (서버 데이터 페칭 완료까지 대기)
• FCP: 620ms
• LCP: 1.2s

PPR 전환 후

• TTFB: 85ms (정적 쉘 즉시)
• FCP: 210ms
• LCP: 980ms (추천 영역은 스트리밍 완료 시점)

TTFB 82% 개선, Core Web Vitals 모두 초록 구간 진입.

캐시 전략

PPR은 정적 부분을 CDN 캐시, 동적 부분은 no-cache. Next.js가 자동 구분:

// 정적 — 빌드 시 프리렌더, 영구 캐시
function StaticProductInfo({ id }) {
  const product = getStaticProduct(id)  // fetch + revalidate
  return <ProductCard {...product} />
}

// 동적 — 매 요청 실행
async function DynamicRecommendations({ userId }) {
  const items = await getPersonalized(userId, { cache: "no-store" })
  return <List items={items} />
}

도입 시 주의사항

1. 1Suspense 경계 명확히: 동적 영역은 반드시 래핑
2. 2headers() / cookies() 사용: 이 호출 있으면 자동 동적 전환. 정적 쉘에서 호출 금지
3. 3빌드 시간 증가: 라우트 프리렌더 늘어나므로 빌드 시간 +20~30%
4. 4dynamic imports: 정적 영역에 동적 import 남용 시 쉘 생성 실패

CF Pages + PPR 조합

Cloudflare Pages에 배포 시 PPR 완벽 지원 (@opennextjs/cloudflare 2.x).

• 정적 쉘: CF CDN에서 즉시 제공
• 동적 영역: CF Workers에서 스트리밍
• 글로벌 PoP 330개 활용 가능

비교: PPR vs ISR vs SSR

마무리

PPR은 "정적의 속도 + 동적의 유연성"을 한 페이지에서 달성하는 2026년 렌더링 표준입니다. 개인화 블록이 있는 모든 페이지(상품 상세·대시보드·피드)에 즉시 효과. App Router 기반 프로젝트라면 experimental 플래그만 켜면 되는 저비용 고효과 최적화입니다.