PPR is an optimization that allows you to combine static and dynamic rendering in the same route. It renders a static shell immediately and streams dynamic parts as they finish.
Interactive Simulation Engine
PPR: Static + Dynamic
Partial Prerendering Simulation
Store Cosmos
Dynamic Slot
The Architecture: PPR allows the server to send thepre-rendered shellinstantly, while the dynamic holesare streamed into the same HTTP request as they resolve.
Executable Code Workbench
page.tsx
Live Code Editor1// next.config.ts
2const nextConfig = {
3 experimental: {
4 ppr: true,
5 },
6};
7
8// app/page.tsx
9export default function Page() {
10 return (
11 <main>
12 <StaticHeader />
13
14 <Suspense fallback={<Loading />}>
15 <DynamicCart /> {/* Streams in later */}
16 </Suspense>
17
18 <StaticFooter />
19 </main>
20 );
21}Mental Model
Think of a photo frame. The frame (Navbar, Sidebar) is always there (Static), but the photo inside (User Profile, Cart) is dynamic and appears as soon as it's ready.
Why This Exists
To provide the 'best of both worlds': the instant load speed of a static site with the personalization of a dynamic app, without needing to choose between them.
Critical Note
"PPR is just another name for Suspense. No. While it uses Suspense boundaries, PPR fundamentally changes how Next.js generates the initial HTML at build-time vs request-time."