What is Partial Prerendering (PPR)?

Question

Accepted Answer

**Partial Prerendering (PPR)** is a Next.js rendering model that combines **static and dynamic content in a single page** — serving an instant static shell while streaming the dynamic parts. It blurs the old all-or-nothing line between SSG and SSR. ## The problem it solves Traditionally a page was *either* fully static (fast, but can't have per-user content) *or* fully dynamic (can be personalized, but slower and uncacheable). Real pages are mixed: a product page has a static layout/description but a dynamic cart count and personalized recommendations. PPR lets the **same page** be both. ## How it works ```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 */}

); } ``` The key idea: everything **outside** a `` boundary is **prerendered as a static shell** at build time. Anything **inside** Suspense (which reads dynamic data — cookies, headers, uncached fetches) is treated as a dynamic "hole" that streams in at request time. ## The delivery sequence ```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 ``` The user gets a meaningful first paint immediately (static shell from CDN), then the personalized pieces fill in — best-of-both: static speed *and* dynamic content, with no separate routing or rendering-mode decision. ## Status ```text PPR has been an experimental/incremental feature; enable per-config/route. Check your Next.js version — the API and stability have been evolving. ``` ## Why it matters PPR removes the false choice between "fast but static" and "dynamic but slow." By prerendering the shell and streaming only the dynamic holes (marked by Suspense), a single page delivers CDN-instant first paint plus personalized content — automatically, without splitting the page or manually choosing SSG vs SSR. It represents where Next.js rendering is headed: granular, per-component static/dynamic composition.