ppr

Partial Prerendering（PPR）を使用すると、同じルートで静的コンポーネントと動的コンポーネントを組み合わせることができます。詳細は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	experimental incremental値が導入されました
v14.0.0	experimental pprが導入されました