▲ Next.js Beginner

What is Partial Prerendering (PPR) in Next.js?

Answer

Partial Prerendering (PPR) is an experimental Next.js 14+ feature that combines static and dynamic rendering in a single request, per page. With PPR, a route's static "shell" is pre-rendered and served from the edge instantly, while dynamic content streams in asynchronously. Problem it solves: traditionally, you choose between static (fast, stale) or dynamic (fresh, slower). PPR enables: serve the static layout/skeleton instantly → stream in the dynamic personalized parts. How it works: the route is analyzed at build time. Static parts (no dynamic functions, no uncached data) are pre-rendered as HTML. Dynamic parts are wrapped in <Suspense> boundaries — their fallbacks are included in the static shell. At request time: static shell is served instantly from edge cache → dynamic parts render on server and stream to client while the user already sees the page. Example: export const experimental_ppr = true; // Enable PPR for this route export default function Page() { return ( <main> <StaticHeader /> {/* pre-rendered */} <Suspense fallback={<Skeleton />}> <DynamicUserData /> {/* streamed */} </Suspense> </main> ); }. Enable globally: experimental: { ppr: true } in next.config.js. PPR requires the App Router and Suspense boundaries.