Skip to main content

Performance Optimization

Partial Prerendering (PPR)

0:00
LearnStep 1/3

What is Partial Prerendering?

Partial Prerendering: Best of Both Worlds

PPR lets you have a static shell that loads instantly with dynamic holes that stream in. It's the combination of static site generation and streaming server rendering.

Traditional Approaches

Partial Prerendering

How PPR Works

  1. At build time, Next.js pre-renders the static parts
  2. Dynamic parts are replaced with Suspense fallbacks
  3. On request, static HTML is served from CDN instantly
  4. Dynamic parts stream in as they resolve

Enabling PPR

js
tsx
Partial Prerendering (PPR) | Advanced Next.js Masterclass | Mathematicon