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.

The Problem PPR Solves

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

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.

---

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