Next.js 15 Partial Prerendering 완벽 가이드 — 정적과 동적 렌더링의 통합

Partial Prerendering — 정적과 동적 렌더링의 혼합

Next.js 15의 Partial Prerendering은 하나의 라우트에서 정적 셸과 동적 콘텐츠를 혼합하는 새로운 렌더링 모델이다. 페이지의 정적 부분은 빌드 시 사전 생성되어 CDN에서 즉시 제공되고, 동적 콘텐츠는 React Suspense 경계를 통해 요청 시 스트리밍된다. 기존에는 정적 생성(SSG)과 서버 렌더링(SSR) 중 하나를 라우트 단위로 선택해야 했지만, PPR은 이 경계를 컴포넌트 단위로 낮춰 첫 바이트 응답 속도와 데이터 신선도를 동시에 확보할 수 있다.

// next.config.ts
const config = {
  experimental: { ppr: 'incremental' }
}

// app/dashboard/page.tsx
export const experimental_ppr = true

export default function Dashboard() {
  return (
    <>
      <StaticHeader />
      <Suspense fallback={<Skeleton />}>
        <DynamicUserData />
      </Suspense>
    </>
  )
}

Partial Prerendering Suspense 경계로 동적 영역 정의

PPR에서 동적 영역은 React Suspense로 래핑하는 것만으로 정의된다. Suspense 내부의 동적 컴포넌트는 빌드 시 처리되지 않고 요청 시점에 서버에서 렌더링되어 스트리밍된다. Suspense의 폴백 UI는 정적 셸의 일부로 미리 생성되므로 동적 콘텐츠 로딩 중에도 즉시 표시된다. 이 설계 덕분에 사용자는 빈 화면 대신 의미 있는 레이아웃을 즉시 볼 수 있어 체감 로딩 속도가 크게 향상된다.

Next.js 15 캐싱 전략 변경사항

Next.js 15에서 가장 주의해야 할 변경사항은 fetch 요청의 기본 캐시 전략이다. 14 버전에서는 force-cache가 기본이었지만 15부터는 no-store가 기본으로 바뀌어, 명시적 캐시 설정 없이 업그레이드하면 기존에 캐시되던 요청이 모두 매 요청마다 실행된다. 마이그레이션 시에는 모든 fetch 호출의 캐시 설정을 검토하고, 캐시가 필요한 요청에 명시적으로 cache: 'force-cache'나 next: { revalidate: N }을 추가해야 한다.

Next.js 15와 React 19 통합 방법

Next.js 15는 React 19를 공식 지원하며, Server Actions, use() 훅, useOptimistic 등 React 19의 새 기능을 온전히 사용할 수 있다. 업그레이드 시 React 18에서 deprecated된 API 사용 여부를 확인해야 하며, peer dependency 충돌이 발생하는 서드파티 패키지는 별도로 업데이트해야 한다. Next.js 팀의 공식 codemod 도구로 대부분의 자동 수정이 가능하다.

Partial Prerendering TTFB 개선과 Core Web Vitals

PPR 적용 시 정적 셸이 CDN에서 제공되므로 TTFB가 대폭 감소한다. 동적 콘텐츠는 스트리밍되어 점진적으로 표시되므로 사용자 체감 로딩 속도도 개선된다. LCP 지표 개선에 특히 효과적이며, 상품 목록처럼 정적 레이아웃과 실시간 재고 정보가 혼재하는 전자상거래 페이지에 적합하다. Vercel Analytics나 Search Console에서 실제 사용자 데이터로 개선 효과를 검증하는 것을 권장한다.

Partial Prerendering 컴포넌트 경계 설계 원칙

PPR을 효과적으로 활용하려면 컴포넌트를 정적과 동적으로 명확히 분리하는 설계가 중요하다. 헤더, 네비게이션, 히어로 섹션처럼 모든 사용자에게 동일하게 보이는 부분은 정적으로 유지하고, 사용자별 추천 콘텐츠나 실시간 재고·가격 정보는 Suspense로 격리하는 설계가 최적이다. 동적 컴포넌트의 경계를 너무 좁게 설정하면 Suspense 폴백이 많아지고, 너무 넓게 설정하면 PPR의 이점을 충분히 활용하지 못한다.