Partial Prerendering: Static Shell, Dynamic Holes
Combine a prerendered static shell with streamed dynamic regions using the PPR model.
What Is Partial Prerendering?
Partial Prerendering (PPR) is a rendering model introduced in Next.js 14+ and refined in Next.js 15 that lets a single route serve both static and dynamic content simultaneously.
With traditional rendering you had to pick one:
- Static (SSG/SSR with full cache) — fast, but stale for personalized data
- Dynamic (SSR on every request) — fresh, but slower Time-To-First-Byte
PPR breaks that trade-off. At build time Next.js pre-renders a static shell (layout, chrome, above-the-fold content) and punches out holes where dynamic data will stream in at request time — all from one route file.
Enabling PPR in Next.js 15
PPR is an opt-in feature. Enable it in next.config.ts with the experimental.ppr flag.
In Next.js 15 you can also enable it incrementally — per route — using the experimental_ppr route-segment config export instead of turning it on globally.
Once enabled, the framework analyses your route tree at build time, separating the static shell from any subtrees that contain dynamic APIs (cookies(), headers(), searchParams, noStore(), etc.).
// next.config.ts
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
experimental: {
ppr: true, // enable globally
// OR use 'incremental' to opt in per-route
// ppr: 'incremental',
},
};
export default nextConfig;All lessons in this course
- Suspense Boundaries and Component-Level Streaming
- Crafting Meaningful loading.tsx and Skeletons
- Partial Prerendering: Static Shell, Dynamic Holes
- Streaming Pitfalls: Layout Shift and Waterfalls