Partial Prerendering (PPR): Static Speed for Dynamic Pages

WHY IT EXISTS Traditional Server-Side Rendering (SSR) forces users to wait for the entire page to be generated on the server before they see anything, leading to a slow Time to First Byte (TTFB). Static Site Generation (SSG) is fast but inflexible for dynamic content. PPR was created to combine the instant load of static with the flexibility of dynamic rendering.

THE MENTAL MODEL Think of PPR as serving a pre-fabricated house. The user instantly gets the static shell of the page—the walls, roof, and layout. While they're looking at that, the dynamic parts—the furniture, appliances, and decor—are delivered and slotted into place as they become ready. The user gets an immediate, meaningful view that progressively enhances with dynamic data.

HOW IT WORKS When a request comes in for a page using PPR, Next.js immediately serves a static HTML shell. This shell is generated at build time or revalidated. The shell contains placeholders for dynamic content, which are wrapped in React Suspense boundaries. After the static shell is sent, the server continues to render the dynamic components. As each component finishes rendering, its HTML is streamed to the client to fill in the corresponding placeholder, without blocking the rest of the page.

WHEN TO USE IT Use PPR for pages that have a mix of static and dynamic content. It's the default for dynamic pages in the Next.js App Router and is ideal for e-commerce product pages (static description, dynamic reviews), social media feeds (static layout, dynamic posts), or news articles (static article body, dynamic comments section). It dramatically improves the perceived performance for these common use cases.

WHEN NOT TO USE IT For purely static content with no dynamic elements, traditional SSG is still simpler and more efficient. For highly interactive, client-heavy applications like a complex dashboard where almost everything is dynamic based on real-time user input, a Client-Side Rendering (CSR) approach might be more straightforward, although PPR can still provide a fast initial skeleton.

ONE CANONICAL EXAMPLE An e-commerce product page. The page layout, product title, description, and images are part of the static shell, loading instantly. Meanwhile, components for user reviews, stock availability, and personalized recommendations are wrapped in <Suspense>. They are rendered on the server and streamed in to hydrate the page after the initial static content is visible, giving the user a fast, interactive experience without waiting for every database call to complete.