コンテンツへスキップ
設定next.config.jsppr

ppr

この機能は現在実験段階であり、変更される可能性があります。本番環境での使用は推奨されません。ぜひお試しいただき、フィードバックをGitHubでお寄せください。

部分的なプリレンダリング (PPR) を使用すると、静的コンポーネントと動的コンポーネントを同じルートで組み合わせることができます。PPRの詳細はこちらをご覧ください。

部分的なプリレンダリングの使用

段階的な採用 (バージョン15)

Next.js 15では、レイアウトとページで部分的なプリレンダリングを段階的に導入できます。これには、next.config.jsのpprオプションをincrementalに設定し、ファイルの先頭でexperimental_pprルート構成オプションをエクスポートします。

next.config.ts
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental',
  },
}
 
export default nextConfig
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>
     </>
  };
}

ご存知ですか:

  • experimental_pprが設定されていないルートはデフォルトでfalseになり、PPRを使用してプリレンダリングされません。各ルートでPPRを明示的に有効にする必要があります。
  • experimental_pprは、ネストされたレイアウトやページを含む、ルートセグメントのすべての子に適用されます。すべてのファイルに追加する必要はなく、ルートの最上位セグメントにのみ追加してください。
  • 子セグメントのPPRを無効にするには、子セグメントでexperimental_pprをfalseに設定します。
バージョン変更点
v15.0.0実験的な incremental 値が導入されました
v14.0.0実験的な ppr が導入されました

部分的なプリレンダリングの詳細

部分的なプリレンダリング

部分的なプリレンダリングで静的レンダリングと動的レンダリングの利点を組み合わせる方法を学びましょう。