Sign in
Skip to solution
hardFrontend

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

795 views
01

Understand the problem

Combining a static shell with streamed dynamic holes.

nextjspprrenderingperformance
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Partial Prerendering serves a static prerendered shell instantly and streams in the dynamic parts (wrapped in Suspense) within the same response — getting the speed of static with the freshness of dynamic in one route.

Solution ready — 2 min read

Classified // press E to declassify

04

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>
    </>
  );
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 80 of 95 decoded in the Next.js track. One more won't hurt.

Back to track