PPR (Partial Prerendering)
Partial Prerendering (PPR) を使用すると、同じルート内で静的コンポーネントと動的コンポーネントを組み合わせることができます。PPRの詳細をご覧ください。
Partial Prerenderingの使用方法
段階的な導入（バージョン15）
Next.js 15では、next.config.jsでpprオプションをincrementalに設定し、ファイルの先頭でexperimental_pprルート設定オプションをエクスポートすることで、レイアウトやページに段階的にPPRを導入できます:
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
ppr: 'incremental',
},
}
export default nextConfig/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
ppr: 'incremental',
},
}
module.exports = nextConfigimport { 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>
</>
};
}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に設定します。
| バージョン | 変更点 |
|---|---|
v15.0.0 | 実験的なincremental値が導入されました |
v14.0.0 | 実験的なpprが導入されました |