hardFrontend

What is Partial Prerendering (PPR) in Next.js?

Q: What is Partial Prerendering (PPR) in Next.js?

**TL;DR.** **Partial Prerendering** serves a **static prerendered shell instantly** and **streams in the dynamic parts** (wrapped in Suspense) within the **same response** — combining the speed of static with the freshness of dynamic in a **single route**, no all-or-nothing choice. static shell (CDN, instant) dynamic hole streamed (Suspense) dynamic hole <text class='d-sub' x='320' y='102' text-anchor='m

795 views

Understand the problem

Combining a static shell with streamed dynamic holes.

nextjspprrenderingperformance

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Static page with a dynamic, streamed hole

// Outside Suspense = prerendered static shell.
// Inside Suspense + dynamic data = streamed per-request hole.
export default function Product() {
  return (
    <>
      <ProductInfo />                       {/* static, from build */}
      <Suspense fallback={<PriceSkeleton />}>
        <LivePrice />                        {/* dynamic: cookies/personalized */}
      </Suspense>
    </>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What are Server Actions in Next.js and how do they work?

What are parallel routes (@slot) in Next.js and when would you use them?