Next.js 17 PPR 정착 — Partial Prerendering 6개월 운영기

핵심 요약

Next 17에서 정식이 된 PPR을 월 300만 PV 사이트에 6개월 운영. TTFB 평균 420ms → 245ms, CDN 비용 31% 절감. 핵심은 Suspense 경계 설계 — 너무 크면 정적 영역 손실, 너무 작으면 워터폴 발생.

1. PPR이 뭔가

페이지의 정적 부분은 CDN 캐시, 동적 부분만 SSR. Suspense fallback이 정적 셸. 한 페이지에서 hybrid가 되는 게 핵심 — 기존 ISR/SSR 양자택일에서 벗어남.

2. Suspense 경계 — 우리 팀 규칙

// app/post/[slug]/page.tsx
export const experimental_ppr = true

export default function Page({ params }) {
  return (
    <article>
      <StaticHeader />          {/* 정적, CDN */}
      <Suspense fallback={<Skeleton />}>
        <PostBody slug={params.slug} />   {/* 동적 */}
      </Suspense>
      <Suspense fallback={null}>
        <CommentCount />           {/* 동적, 비차단 */}
      </Suspense>
    </article>
  )
}

3. 실측 결과

4. 함정

• cookies()/headers()를 정적 영역에서 호출하면 전체가 동적으로 떨어짐 — opt-out 잘 챙기기
• Suspense를 너무 깊게 — 워터폴 발생, 한 페이지에 최대 3단계까지
• fallback에 데이터 fetch — 두 번 페치
• dynamic = 'force-dynamic' 잔재 — PPR 비활성, 페이지 단위 점검