Partial Pre-rendering (PPR)

PPR kombinuje statický shell s dynamickými ostrovmi. Statický obsah sa servíruje okamžite z CDN, dynamické časti sa streamujú.

Statický shell

Next.js Cloudflare Showcase

Toto je statický obsah — renderovaný pri builde, servírovaný z CDN

Dynamický ostrov

13:14:17

Toto sa streamuje — mení sa pri každom requeste

Aktivácia PPR

// next.config.ts
const config = {
  experimental: { ppr: "incremental" },
};

// page.tsx
export const experimental_ppr = true;

// Statický shell + dynamický ostrov:
export default function Page() {
  return (
    <>
      <StaticShell />           {/* Okamžite z CDN */}
      <Suspense fallback={<Skeleton />}>
        <DynamicIsland />       {/* Streamuje sa */}
      </Suspense>
    </>
  );
}