ppr

Partial Prerendering（部分的なプレレンダリング：PPR）は、静的コンポーネントと動的コンポーネントを同じルートで組み合わせることができます。詳細はこちらで学べます。

Partial Prerenderingの使用法

漸進的な導入（バージョン 15）

Next.js 15では、next.config.jsでpprオプションをincrementalに設定し、ファイルの上部でexperimental_ppr ルート設定オプションをエクスポートすることで、layoutsおよびpagesにPartial Prerenderingを段階的に導入できます：

TypeScript

next.config.ts

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental',
  },
}

export default nextConfig

JavaScript

next.config.js

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

module.exports = nextConfig

TypeScript

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>
     </>
  };
}

JavaScript

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>
     </>
  };
}

Good to know:

• experimental_pprがないルートはfalseがデフォルトで、PPRを使用したプロレンダリングはされません。各ルートごとにPPRを明示的に選択する必要があります。
• experimental_pprは、ネストされたlayoutsやpagesを含むルートセグメントのすべての子に適用されます。すべてのファイルに追加する必要はなく、ルートのトップセグメントにのみ追加すればよいです。
• 子セグメントのPPRを無効にするには、子セグメントでexperimental_pprをfalseに設定します。

バージョン	変更点
v15.0.0	実験的なincremental値が導入されました
v14.0.0	実験的なpprが導入されました