Partial Prerendering (PPR)
PPR is the ultimate rendering optimization. It pre-renders the static shell of your page at build time and streams dynamic content into 'holes' as soon as it's ready.
Strategy Details
Experimental Stage: Currently available in Next.js 14/15 via an experimental flag. It enables 'incremental' rollout, allowing you to opt-in per route.
Hydration Logic
Pre-rendered HTML is sent to the client, then React 'hydrates' it to enable full interactivity.
The PPR Request Pipeline
Step-by-step visual of "Static Shell + Dynamic Streaming"
User Requests Page
User hits the URL. No pre-processing needed for the static shell.
Edge Sends Static Shell
Instantly delivers Navigation, Layout, and Skeletons from the CDN. (0ms Wait)
Server Resolves 'Hole'
Next.js runs the async database queries only for the dynamic Suspense blocks.
Stream Dynamic Segment
Data is ready! The server streams the final component HTML over the same connection.
Instant Hydration
React swaps the skeleton for the real content. Page is now fully interactive.
When to use PPR?
Landing Pages
Instant SEO Shell + Promo data
User Settings
Highly private, no static benefit
Product Detail
Static specs + Live stock status
Admin Dash
Better as client-side dynamic
Astro Note: Unlike Astro which uses "Islands" to control client JS, PPR uses "Holes" to control server streaming. You get the same result (fast loads) but via a unified server-first pipeline.
The Technical Blueprint
Next.js automatically maps your React code into the PPR pipeline. The secret lies in combining Suspense with Dynamic APIs.
How to implement in Code?
// 🟢 THE STATIC SHELL// Rendered at build-time, sent instantly via CDN.export default function Page() { return ( <main> <Navbar /> <HeroSection /> {/* Static Content */} <Suspense fallback={<Skeleton />}> <DynamicUserDash /> </Suspense> </main> );}You MUST use React Suspense. This is the boundary that signals to Next.js where the Static Shell stops and the Dynamic Hole begins.
Next.js detects Dynamic APIs (cookies, headers, searchParams) inside the Suspense boundary and keeps the stream open only for that part.
Architecture visualization
Concept: Static Shell + Dynamic Holes
The "Static Shell + Dynamic Holes" Model
Concept introduced in Next.js 14
Immediate TTFB
The green parts are served from the global CDN Edge instantly. The user sees the layout and navigation in milliseconds.
Suspense-Driven Streaming
The purple parts are kept in the dynamic state on the server. As soon as the DB query finishes, the server streams the content.
Live PPR Playground
This storefront demonstrates the instant static load (Left) followed by the dynamic personalized stream (Bottom Right).
Static filters
Essence Mascara Lash Princess
The Essence Mascara Lash Princess is a popular mascara known for its volumizing and lengthening effects. Achieve dramatic lashes with this long-lasting and cruelty-free formula.
Eyeshadow Palette with Mirror
The Eyeshadow Palette with Mirror offers a versatile range of eyeshadow shades for creating stunning eye looks. With a built-in mirror, it's convenient for on-the-go makeup application.
Powder Canister
The Powder Canister is a finely milled setting powder designed to set makeup and control shine. With a lightweight and translucent formula, it provides a smooth and matte finish.
Red Lipstick
The Red Lipstick is a classic and bold choice for adding a pop of color to your lips. With a creamy and pigmented formula, it provides a vibrant and long-lasting finish.