Partial Prerendering (PPR)

For years, developers had to choose between Static Site Generation (fast, but generic) and Server-Side Rendering (personalized, but slower).

**Partial Prerendering (PPR)** merges them. During the build step, Next.js generates a static HTML shell of your page. However, it leaves 'holes' wherever it finds a <Suspense> boundary wrapping dynamic data.

Before PPR, if a static e-commerce homepage wanted to display the user's name in the header (which requires reading a cookie), the *entire page* was forced to become dynamic, severely harming TTFB.

With PPR, the user receives the static homepage layout instantly from the Edge CDN. A few milliseconds later, the personalized header streams into the <Suspense> hole.

To use it in Next.js 15, enable it in config and explicitly opt-in at the route level:

typescript

// app/page.tsx

import { Suspense } from 'react';

import { CartCount, Skeleton } from '@/components';

// Opt into PPR

export const experimental_ppr = true;

export default function Page() {

return (

<main>

<StaticHero />

<Suspense fallback={<Skeleton />}>

{/* This streams in dynamically! */}

<CartCount />

</Suspense>

</main>

);

}