ppr

부분 사전 렌더링(PPR)을 사용하면 동일한 라우트에서 정적 및 동적 컴포넌트를 함께 결합할 수 있습니다. PPR에 대해 자세히 알아보세요.

부분 사전 렌더링 사용하기

점진적 도입 (버전 15)

Next.js 15에서는 next.config.js에서 ppr 옵션을 incremental로 설정하고, 파일 상단에 experimental_ppr 라우트 구성 옵션을 내보내어 레이아웃과 페이지에서 부분 사전 렌더링을 점진적으로 도입할 수 있습니다:

next.config.ts

import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  experimental: {
    ppr: "incremental",
  },
};
 
export default nextConfig;

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    ppr: "incremental",
  },
};
 
module.exports = nextConfig;

app/page.tsx

import { Suspense } from "react"
import { StaticComponent, DynamicComponent, Fallback } from "@/app/ui"
 
export const experimental_ppr = true
 
export default function Page() {
  return {
     <>
      <StaticComponent />
      <Suspense fallback={<Fallback />}>
        <DynamicComponent />
      </Suspense>
     </>
  };
}

app/page.js

import { Suspense } from "react"
import { StaticComponent, DynamicComponent, Fallback } from "@/app/ui"
 
export const experimental_ppr = true
 
export default function Page() {
  return {
     <>
      <StaticComponent />
      <Suspense fallback={<Fallback />}>
        <DynamicComponent />
      </Suspense>
     </>
  };
}

알아두면 좋은 점:

experimental_ppr이 없는 라우트는 기본적으로 false로 설정되며 PPR을 사용하여 사전 렌더링되지 않습니다. 각 라우트에 대해 PPR을 명시적으로 설정해야 합니다.

experimental_ppr은 중첩된 레이아웃과 페이지를 포함하여 라우트 세그먼트의 모든 자식에 적용됩니다. 모든 파일에 추가할 필요 없이 라우트의 최상위 세그먼트에만 추가하면 됩니다.

자식 세그먼트에 대해 PPR을 비활성화하려면 해당 자식 세그먼트에서 experimental_ppr을 false로 설정할 수 있습니다.

PPR 활성화하기 (버전 14)

버전 14의 경우, next.config.js 파일에 ppr 옵션을 추가하여 활성화할 수 있습니다. 이는 애플리케이션의 모든 라우트에 적용됩니다:

next.config.ts

import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  experimental: {
    ppr: true,
  },
};
 
export default nextConfig;

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    ppr: true,
  },
};
 
module.exports = nextConfig;

버전	변경 사항
`v15.0.0`	`incremental` 값 도입
`v14.0.0`	실험적 `ppr` 도입

poweredByHeader productionBrowserSourceMaps