ppr

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

Partial Prerenderingの使用

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

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

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

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に設定できます。