Menu

ppr

Partial Prerendering（PPR）により、同じルート内で静的コンポーネントと動的コンポーネントを組み合わせることができます。PPRについてさらに詳しく学びます。

Partial Prerendeingの使用

段階的な導入（バージョン15）

Next.js 15では、next.config.jsのpprオプションをincrementalに設定し、ファイルの先頭でexperimental_pprルート設定オプションをエクスポートすることで、レイアウトとページで段階的にPartial Prerendeingを採用できます：

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
TypeScript
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を使用してプリレンダリングされません。各ルートで明示的にオプトインする必要があります。
  • experimental_pprはルートセグメントのすべての子コンポーネント（ネストされたレイアウトとページを含む）に適用されます。すべてのファイルに追加する必要はなく、ルートの最上位セグメントにのみ追加します。
  • 子セグメントのPPRを無効にするには、子セグメントでexperimental_pprをfalseに設定できます。
バージョン変更点
v15.0.0実験的なincrementalの値が導入されました
v14.0.0実験的なpprが導入されました

Partial Prerendeingについてさらに詳しく学ぶ

Partial Prerendering

Partial Prerendering で静的レンダリングと動的レンダリングの利点を組み合わせる方法を学びます。