Next.js: Partial Prerendering (PPR) — пример кода

// next.config.ts — opt in incrementally
import type { NextConfig } from 'next';
const config: NextConfig = {
  experimental: { ppr: 'incremental' }, // 'incremental' = per-route opt-in
};
export default config;

// app/product/[id]/page.tsx
export const experimental_ppr = true;

export default function Page() {
  return (
    
      {/* STATIC SHELL — prerendered at build, served from CDN */}
      
      

      {/* DYNAMIC HOLE — fallback ships in the shell, real content streams */}
      }>
         {/* reads cookies() → dynamic, but only THIS subtree */}
      

      }>
         {/* per-user, streamed in */}
      
    
  );
}

// ❌ Dynamic API OUTSIDE a boundary poisons the shell — PPR can't prerender.
export default async function Page() {
  const user = cookies().get('uid'); // no Suspense above this → whole route dynamic
  return {user?.value};
}