What is Partial Prerendering (PPR) in Next.js?
Why Interviewers Ask This
This question tests conceptual clarity. Interviewers want to hear a precise, confident definition before moving to more complex Next.js topics. It also reveals how well you can explain technical ideas to non-experts.
Answer
Partial Prerendering (PPR) is an experimental Next.js 14+ feature that combines static and dynamic rendering in a single request, per page. With PPR, a route's static "shell" is pre-rendered and served from the edge instantly, while dynamic content streams in asynchronously. Problem it solves: traditionally, you choose between static (fast, stale) or dynamic (fresh, slower). PPR enables: serve the static layout/skeleton instantly → stream in the dynamic personalized parts. How it works: the route is analyzed at build time. Static parts (no dynamic functions, no uncached data) are pre-rendered as HTML. Dynamic parts are wrapped in <Suspense> boundaries — their fallbacks are included in the static shell. At request time: static shell is served instantly from edge cache → dynamic parts render on server and stream to client while the user already sees the page. Example: export const experimental_ppr = true; // Enable PPR for this route export default function Page() { return ( <main> <StaticHeader /> {/* pre-rendered */} <Suspense fallback={<Skeleton />}> <DynamicUserData /> {/* streamed */} </Suspense> </main> ); }. Enable globally: experimental: { ppr: true } in next.config.js. PPR requires the App Router and Suspense boundaries.
Common Mistake
A common mistake is memorizing definitions without understanding implications. When asked this question, go one level deeper — explain what happens when this concept is misused or ignored.