Partial Pre-Rendering (PPR) in Next.js: The Complete Guide

Partial Pre-Rendering (PPR) in Next.js: The Complete Guide

Partial Pre-Rendering (PPR) is the most exciting Next.js feature since Server Components. With the new use cache directive, Vercel's framework finally solves the dilemma: static or dynamic?

The 2026 answer: both, on the same page.

What performance problem does Partial Pre-Rendering solve?

Imagine an e-commerce page:

Before PPR: you had to choose SSG, SSR, or ISR. With PPR, each element renders optimally.

How PPR Works

1. Build time: pre-renders static parts
2. Edge: static shell served from CDN instantly
3. Streaming: dynamic parts streamed in parallel

The use cache Directive

async function ProductInfo({ id }: { id: string }) {
  "use cache";
  const product = await db.product.findUnique({ where: { id } });
  return <div>{product.name} - {product.description}</div>;
}

async function LivePrice({ id }: { id: string }) {
  const price = await fetchLivePrice(id);
  return <span>{price} EUR</span>;
}

export default async function ProductPage({ params }) {
  return (
    <div>
      <Suspense fallback={<ProductSkeleton />}>
        <ProductInfo id={params.id} />
      </Suspense>
      <Suspense fallback={<PriceSkeleton />}>
        <LivePrice id={params.id} />
      </Suspense>
    </div>
  );
}

PPR vs ISR vs SSR: which rendering strategy to choose for Next.js?

Migration

Step 1: Enable PPR

const nextConfig = {
  experimental: { ppr: true },
};

Step 2: Classify components

• Static → use cache with long duration
• Semi-dynamic → use cache with revalidation
• Dynamic → no cache

Step 3: Wrap with Suspense

Each cacheable component in a <Suspense> with fallback.

Core Web Vitals Impact

Conclusion

PPR is a paradigm shift: the best of both worlds without compromise. To understand the full context of Next.js 16, read our introduction to Next.js 16 and React 19, and for the latest evolutions including the Adapter API, see Next.js 16.2 Agent-Ready.

---

Need help migrating to PPR? At BOVO Digital, we optimize web performance with the latest Next.js technologies.