Partial Prerendering (PPR)

/* 
  Note: PPR is currently an experimental feature in Next.js 14+
  Requires 'experimental: { ppr: true }' in next.config.js
*/
import { Suspense } from 'react';
import { StaticProductDetails } from './components';
import { DynamicCartStatus } from './components'; // Relies on cookies/DB

export default function ProductPage() {
  return (
    <main>
      {/* ⚡ INSTANT: This is pre-rendered at build time and served from CDN */}
      <StaticProductDetails />
      
      {/* 
        🕳️ THE HOLE: Suspense tells PPR this part is dynamic.
        The fallback is served instantly with the static shell. 
        The actual Cart is generated dynamically on the server and streamed in.
      */}
      <Suspense fallback={<div className="w-10 h-10 animate-pulse bg-gray-200" />}>
        <DynamicCartStatus />
      </Suspense>
    </main>
  );
}