ppr

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

Partial Prerendering の使用

Incremental Adoption（バージョン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は、そのルートセグメントのすべての子に適用され、ネストされたレイアウトやページも含みます。すべてのファイルに追加する必要はなく、ルートの最上位セグメントに追加するだけでいいです。
• 子セグメントに対してPPRを無効にするには、子セグメントでexperimental_pprをfalseに設定します。

Version	Changes
v15.0.0	experimental incremental value introduced
v14.0.0	experimental ppr introduced