PERFORMANCE

Home › Glossary › Performance· 304 ·

Partial Prerendering (PPR)

/ˈpɑːrʃəl priːrɛnˈdɛrɪŋ/abbr.

Filed underPerformanceArchitectureFront End

In brief · quick answer

A rendering strategy pioneered in Next.js that combines static prerendering and dynamic streaming in the same HTTP response. Static shell is served instantly from CDN; dynamic content streams in.

§ 1 Definition

Partial Prerendering (PPR) is a rendering strategy that delivers a static HTML shell immediately (pre-rendered at build time or cached), while streaming dynamic, personalized, or data-dependent content in the same response. It is the most significant architectural advance in web rendering since the introduction of SSR. PPR eliminates the static vs dynamic tradeoff by serving each component in its optimal mode. It became stable in Next.js 16 and is being adopted by other frameworks.

§ 2 How PPR Works

At build time (or on first request), PPR pre-renders the static portions of a page into an HTML shell. This shell is cached at the CDN edge. When a user requests the page, the CDN instantly returns the shell while the server renders the dynamic parts (user-specific data, real-time prices, personalized recommendations) and streams them in as Suspense boundaries resolve. The browser paints the shell immediately, then progressively enhances with dynamic content.

§ 3 Common Misunderstandings

PPR is NOT the same as traditional ISR (Incremental Static Regeneration) or SSR. ISR regenerates entire pages; PPR mixes static and dynamic within a single page response. SSR renders everything on every request; PPR only renders dynamic portions on request. Also, PPR requires framework support (Next.js 16+) and careful component architecture. Not every component should be dynamic: wrapping too many components in dynamic boundaries defeats the purpose.

§ 4 When to Use

PPR is ideal for pages with a mix of static and dynamic content: e-commerce product pages (static description + dynamic inventory/price), news sites (static article + dynamic comments/ads), dashboards (static layout + dynamic widgets), and social feeds (static shell + personalized content). PPR is less beneficial for fully static pages (no dynamic content) or fully dynamic pages (no static shell). The use cache directive in Next.js 16 lets developers declaratively mark components as cached or dynamic.

§ 5 Note

PPR requires CDN support for streaming responses through the edge. Vercel and other edge-enabled providers support this natively. In Next.js 16, PPR is enabled via the partialPrerendering config option.

§ 6 In code

// Next.js 16 PPR with use cache
import { Suspense } from 'react'

export default function Page() {
  return (
    <div>
      <Header />                    {/* Static shell - pre-rendered */}
      <ProductDescription />         {/* Static - pre-rendered */}
      <Suspense fallback={<PriceSkeleton />}>
        <DynamicPrice />             {/* Dynamic - streamed */}
      </Suspense>
    </div>
  )
}

// The 'use cache' directive marks content as cacheable
async function ProductDescription() {
  'use cache';
  const data = await fetchCMS();
  return <div>{data.content}</div>;
}

async function DynamicPrice() {
  const price = await fetchLivePrice();
  return <div>{price.amount}</div>;
}

§ 7 Common questions

Q. Does PPR work with Server Components?: A. Yes. PPR is designed for the React Server Components model and is a natural extension of it.

Key takeaways

Combines static prerendering with dynamic streaming.
Static shell served instantly from CDN.
Dynamic content streams in via Suspense.
Requires Next.js 16+ or equivalent framework support.
Ideal for mixed static/dynamic pages.

How Atomic Glue helps

Atomic Glue designs and implements PPR architectures for Next.js applications, identifying the right split between static and dynamic content and configuring edge caching. Web Development services.

Get in touch

# Partial Prerendering (PPR)

A rendering strategy pioneered in Next.js that combines static prerendering and dynamic streaming in the same HTTP response. Static shell is served instantly from CDN; dynamic content streams in.

Category: Performance (also: Architecture, Front End)

Author: Atomic Glue Performance Team

## Definition

## How PPR Works

## Common Misunderstandings

## When to Use

## Note

## In code

// Next.js 16 PPR with use cache
import { Suspense } from 'react'

export default function Page() {
  return (
    <div>
      <Header />                    {/* Static shell - pre-rendered */}
      <ProductDescription />         {/* Static - pre-rendered */}
      <Suspense fallback={<PriceSkeleton />}>
        <DynamicPrice />             {/* Dynamic - streamed */}
      </Suspense>
    </div>
  )
}

// The 'use cache' directive marks content as cacheable
async function ProductDescription() {
  'use cache';
  const data = await fetchCMS();
  return <div>{data.content}</div>;
}

async function DynamicPrice() {
  const price = await fetchLivePrice();
  return <div>{price.amount}</div>;
}

## Common questions

Q: Does PPR work with Server Components?

A: Yes. PPR is designed for the React Server Components model and is a natural extension of it.

## Key takeaways

Combines static prerendering with dynamic streaming.
Static shell served instantly from CDN.
Dynamic content streams in via Suspense.
Requires Next.js 16+ or equivalent framework support.
Ideal for mixed static/dynamic pages.

## Related entries

Last updated July 2026. Permalink: atomicglue.co/glossary/partial-prerendering-ppr