Partial Prerendering (PPR) とは何ですか？

Question

Accepted Answer

**Partial Prerendering (PPR)** は、Next.js のレンダリングモデルで、**静的コンテンツと動的コンテンツを単一ページで組み合わせ**、瞬時に静的シェルを提供しながら動的部分をストリーミングします。従来の SSG と SSR の all-or-nothing の境界線を曖昧にします。 ## 解決する問題従来、ページは*完全に静的*（高速だが、ユーザー固有のコンテンツは不可）*または*完全に動的*（パーソナライズ可能だが低速でキャッシュ不可）のいずれかでした。現実のページは混合です：商品ページは静的なレイアウト・説明を持ちながら、動的なカート数とパーソナライズされた推奨事項があります。PPR により、**同じページ**が両方になることができます。 ## どのように機能するか ```tsx import { Suspense } from "react"; export default function ProductPage() { return (

{/* STATIC — prerendered, served instantly from CDN */} {/* STATIC — same for everyone */} }> {/* DYNAMIC — streamed in per request */} }> {/* DYNAMIC — personalized, streamed */}

); } ``` 重要な考え方：`` 境界の**外側**にあるすべては、ビルド時に**静的シェルとしてプレレンダリング**されます。Suspense の**内側**にあるもの（動的データを読み取ります — cookies、headers、キャッシュされていないフェッチ）は、リクエスト時にストリーミングされる動的な「穴」として扱われます。 ## 配信シーケンス ```text 1. Static shell (header, product info, skeletons) → served INSTANTLY from the edge/CDN 2. Dynamic holes (cart, recommendations) → stream in and replace the skeletons ``` ユーザーは有意義なファーストペイントを直ちに受け取り（CDN からの静的シェル）、次にパーソナライズされたピースが埋まります — 最良の両方：静的な速度*と*動的コンテンツ、個別のルーティングやレンダリングモード決定なし。 ## ステータス ```text PPR has been an experimental/incremental feature; enable per-config/route. Check your Next.js version — the API and stability have been evolving. ``` ## なぜ重要なのか PPR は「高速だが静的」と「動的だが低速」の間の偽の選択を取り除きます。シェルをプレレンダリングし、動的な穴のみ（Suspense でマーク）をストリーミングすることで、単一ページは CDN 瞬時のファーストペイントとパーソナライズされたコンテンツを自動的に配信します — ページを分割したり、SSG と SSR を手動で選択したりすることなく。これは Next.js レンダリングの向かう先を表しています：細粒度で、コンポーネントごとの静的・動的構成。