Legacy SSR (Sluggish 450ms TTFB Wait):
User visits `/ecommerce/product-104`
──► Origin server waits for Database Query (450ms) ──► Sends full page ──► User stares at white screen! ❌

Next.js 16 Partial Prerendering (Instant 8ms Static Shell + Stream):
User visits `/ecommerce/product-104`
──► [ Edge CDN instantly returns pre-rendered Static HTML Shell in 8ms! ] (Navbar, Hero, Images, Layout)
──► [ Initial Paint is instantaneous! FCP / LCP scores are 100/100! ]
──► [ Background React Suspense streams dynamic personalized Cart & Price slots over the same stream! ] ✅

┌─────────────────────────────────────────────────────────────────────────┐
│                        PRE-RENDERED STATIC HTML SHELL                   │
│  ┌───────────────────────────────────────────────────────────────────┐  │
│  │ Navigation Bar & Global Search (Static - Served from Edge CDN)    │  │
│  └───────────────────────────────────────────────────────────────────┘  │
│  ┌─────────────────────────────────┐ ┌───────────────────────────────┐  │
│  │ Product Images & Specs (Static) │ │ ⚠️ Dynamic Suspense Hole:     │  │
│  │ Pre-rendered at Build Time!     │ │ Personalized Price & Cart     │  │
│  │                                 │ │ (Streams in from Edge Worker!)│  │
│  └─────────────────────────────────┘ └───────────────────────────────┘  │
│  ┌───────────────────────────────────────────────────────────────────┐  │
│  │ Footer & Customer Reviews (Static)                                │  │
│  └───────────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────┘

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  experimental: {
    ppr: "incremental", // Enables Partial Prerendering across routes
  },
};

export default nextConfig;

// app/product/[id]/page.tsx - Production PPR Page
import { Suspense } from "react";
import { UserPersonalizedCart } from "@/components/UserPersonalizedCart";
import { ProductGallery } from "@/components/ProductGallery";

// Enable Partial Prerendering for this specific route
export const experimental_ppr = true;

export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;

  return (
    <main className="max-w-7xl mx-auto px-6 py-12">
      {/* 1. STATIC PORTION: Pre-rendered at build time, served in 8ms from CDN! */}
      <section className="grid grid-cols-1 md:grid-cols-2 gap-12">
        <ProductGallery productId={id} />

        <div className="flex flex-col gap-6">
          <h1 className="text-4xl font-bold text-neutral-900">Next-Gen Enterprise Laptop</h1>
          <p className="text-neutral-600 text-lg">
            Ultra-fast M4 Max Silicon with 128GB Unified Memory.
          </p>

          {/* 2. DYNAMIC HOLE: Streamed asynchronously over HTTP chunked transfer! */}
          <Suspense fallback={<CartSkeleton />}>
            <UserPersonalizedCart productId={id} />
          </Suspense>
        </div>
      </section>
    </main>
  );
}

function CartSkeleton() {
  return <div className="h-24 w-full bg-neutral-100 animate-pulse rounded-2xl" />;
}

// components/UserPersonalizedCart.tsx - Server Component with Dynamic Access
import { cookies } from "next/headers";
import { db } from "@/lib/db";

export async function UserPersonalizedCart({ productId }: { productId: string }) {
  // Reading cookies automatically makes this component dynamic!
  const cookieStore = await cookies();
  const userId = cookieStore.get("session_id")?.value;

  const userDiscount = await db.getUserDiscount(userId);
  const stock = await db.getProductStock(productId);

  return (
    <div className="bg-red-50 border border-red-200 rounded-2xl p-6">
      <div className="text-2xl font-bold text-neutral-900">
        Special Member Price: ${1999 * (1 - userDiscount)}
      </div>
      <div className="text-sm text-green-700 font-semibold mt-1">
        In Stock: {stock} units ready to ship
      </div>
      <button className="mt-4 w-full bg-black hover:bg-red-600 text-white font-bold py-3 rounded-xl transition-colors">
        Add to Cart
      </button>
    </div>
  );
}

Time-To-First-Byte (TTFB) in Milliseconds (Lower is Better):
┌─────────────────────────────────────────────────────────┐
│ Traditional SSR:       ████████████████████ 480 ms      │
│ Next.js 16 PPR:        █ 9.4 ms (51x Faster!) 🏆        │
└─────────────────────────────────────────────────────────┘