Traditional SSR (Sluggish TTFB):
User Request ──► [ Server waits for Database & User Auth (400ms) ] ──► Sends HTML (TTFB = 450ms!) ❌

Next.js 16 Partial Prerendering (PPR - Instant Edge Shell + Dynamic Stream):
User Request ──► [ Global Edge CDN delivers Static HTML Shell INSTANTLY in 8ms! ] (Instant FCP!) ⚡
                 │
                 ▼ (Single HTTP connection stays open via chunked transfer encoding)
[ Dynamic Suspense Hole: User Cart / Live Feed streams in as soon as DB finishes! ] ✅

┌─────────────────────────────────────────────────────────────────────────┐
│              STATIC EDGE SHELL (Delivered in 8ms from CDN)              │
│  [ Navbar: MojoStudio Store ]          [ Search Input ]                 │
│  [ Product Image: Laptop Pro ]         [ Static Price: $1,299 ]         │
├─────────────────────────────────────────────────────────────────────────┤
│            DYNAMIC SUSPENSE HOLE (Streamed over HTTP/2 Stream)          │
│  <Suspense fallback={<CartSkeleton />}>                                 │
│      [ Personalized Component: "Welcome back, Sachin! (3 items in cart)"]│
│  </Suspense>                                                            │
└─────────────────────────────────────────────────────────────────────────┘

// next.config.mjs - Next.js 16 Configuration
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    ppr: "incremental", // Allows enabling PPR per-route
  },
};

export default nextConfig;

// app/products/[slug]/page.tsx - Production PPR Page
import { Suspense } from "react";
import { StaticProductDetails } from "@/components/StaticProductDetails";
import { DynamicUserCart, CartSkeleton } from "@/components/DynamicUserCart";
import { LiveInventoryStatus, InventorySkeleton } from "@/components/LiveInventory";

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

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

  return (
    <main className="max-w-6xl mx-auto p-6 space-y-8">
      {/* 1. Static Component: Pre-rendered at build time, served in < 10ms from CDN */}
      <StaticProductDetails slug={slug} />

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* 2. Dynamic Hole A: Personalized User Cart (reads cookies) */}
        <Suspense fallback={<CartSkeleton />}>
          <DynamicUserCart />
        </Suspense>

        {/* 3. Dynamic Hole B: Live Real-Time Warehouse Stock */}
        <Suspense fallback={<InventorySkeleton />}>
          <LiveInventoryStatus slug={slug} />
        </Suspense>
      </div>
    </main>
  );
}

// components/DynamicUserCart.tsx
import { cookies } from "next/headers";
import db from "@/lib/db";

export async function DynamicUserCart() {
  // Reading dynamic cookies opts this specific Suspense boundary into streaming!
  const cookieStore = await cookies();
  const sessionToken = cookieStore.get("session_token")?.value;

  if (!sessionToken) {
    return <div className="text-neutral-400">Please sign in to view cart.</div>;
  }

  const userCart = await db.query(
    "SELECT item_count, total_cents FROM carts WHERE session_token = $1",
    [sessionToken]
  );

  const cart = userCart.rows[0];
  return (
    <div className="p-4 bg-neutral-900 border border-neutral-800 rounded-xl">
      <h3 className="text-white font-semibold">Your Cart ({cart.item_count} items)</h3>
      <p className="text-red-500 font-mono font-bold">${(cart.total_cents / 100).toFixed(2)}</p>
    </div>
  );
}

Time-to-First-Byte (TTFB in Milliseconds - Lower is Better):
┌─────────────────────────────────────────────────────────┐
│ Traditional SSR:         ████████████████████ 480 ms    │
│ Client SPA:              ██ 28 ms                       │
│ Next.js 16 PPR:          █ 8 ms (60x Faster than SSR!)  │
└─────────────────────────────────────────────────────────┘