Topic 37 of 39
Partial Prerendering (PPR)
Overview
Partial Prerendering (experimental) combines static and dynamic rendering on the SAME page. The static shell (navbar, footer, layout) is served instantly from the CDN, while dynamic content wrapped in <Suspense> streams in via the server.
Syntax
tsx
// next.config.js
module.exports = {
experimental: {
ppr: true,
},
};
// app/page.tsx
import { Suspense } from 'react';
import { cookies } from 'next/headers'; // Dynamic function!
export default function Page() {
return (
<main>
<Navbar /> {/* STATIC: Served instantly from CDN */}
<Suspense fallback={<Spinner />}>
{/* DYNAMIC: Streams in slightly later */}
<PersonalizedCart />
</Suspense>
</main>
);
}Common Pitfalls
- Thinking PPR is fully stable; it is an experimental feature (as of Next 14) and APIs may change.
- Not wrapping dynamic components in
<Suspense>, which causes the entire page to fall back to dynamic rendering.
Interview Questions
Q:
How does Partial Prerendering solve the Static vs Dynamic tradeoff?
A:
Previously, a single dynamic function (like reading a cookie) opted the entire page into slower Dynamic Rendering. PPR allows the static parts of the page to remain static and fast, while streaming in only the dynamic parts.
Real-World Example
E-commerce product page where the product details are static, but the user's cart status is dynamic.
example
tsx
// The product details are served statically worldwide
// The user's cart count fetches dynamically without blocking the page
<Suspense fallback={<CartSkeleton />}>
<CartIcon />
</Suspense>Check Your Knowledge
Test your understanding of Partial Prerendering (PPR) with these quick questions.