// ISR — the staleness window
export const revalidate = 60 // Seconds

export default async function ProductPage({ params }) {
  const product = await fetch(`https://api.example.com/products/${params.id}`, {
    next: { revalidate: 60 },
  }).then(r => r.json())

  return <ProductDetail product={product} />
}

// ❌ ISR problem — same cached HTML for all users, no personalization
// ❌ Price update takes up to 60s to reach users
// ❌ Cannot show user-specific data (cart count, name, preferences)

// PPR page — shell and slots defined by <Suspense> boundaries
import { Suspense } from 'react'

// PPR is currently enabled per-route in next.config.ts:
// experimental: { ppr: 'incremental' }
// Then opt in per-layout/page:
export const experimental_ppr = true

export default function ProductPage({ params }) {
  return (
    <div>
      {/* STATIC SHELL — rendered at build time, CDN-cached */}
      <SiteHeader />        {/* No dynamic APIs — becomes part of the shell */}
      <ProductHero id={params.id} />  {/* Static product title and image */}

      {/* DYNAMIC SLOTS — generated per-request, streamed from origin */}
      <Suspense fallback={<PriceSkeleton />}>
        <LivePrice productId={params.id} />   {/* Calls cookies() for currency pref */}
      </Suspense>

      <Suspense fallback={<CartButtonSkeleton />}>
        <AddToCartButton productId={params.id} />  {/* Calls cookies() for cart session */}
      </Suspense>

      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews productId={params.id} />    {/* Slow DB query — independent stream */}
      </Suspense>
    </div>
  )
}

// What components make a slot dynamic:

// ✅ Static — stays in shell
async function StaticComponent() {
  const data = await fetch('https://api/static', { cache: 'force-cache' }) // Cached fetch
  return <div>{data.title}</div>
}

// ❌ Dynamic — becomes a slot (must be inside <Suspense>)
async function DynamicComponent() {
  const cookieStore = await cookies()      // Dynamic API → cannot be pre-rendered
  const session = cookieStore.get('sid')
  return <div>Hello {session?.value}</div>
}

// ❌ Dynamic — uncached fetch is per-request
async function LivePriceComponent({ id }) {
  const price = await fetch(`/api/price/${id}`, { cache: 'no-store' }) // Per-request
  return <span>{price}</span>
}

// next.config.ts (Next.js 15)
import type { NextConfig } from 'next'

const config: NextConfig = {
  experimental: {
    ppr: 'incremental', // Enable incremental adoption — opt in per route
  },
}
export default config

// In any layout.tsx or page.tsx:
export const experimental_ppr = true // Route-level opt-in

// next.config.ts (Next.js 16+)
import type { NextConfig } from 'next'

const config: NextConfig = {
  cacheComponents: true, // Enables static shell + streaming slots (replaces experimental.ppr)
}
export default config

// In a Server Component — use the 'use cache' directive to mark static subtrees
// next.js 16 dynamic slots are still wrapped in <Suspense>
// The static shell is determined by 'use cache' directives on data functions, not route-level flags
import { unstable_cacheTag as cacheTag } from 'next/cache'

async function getProductData(id: string) {
  'use cache'
  cacheTag('product-data')
  return db.products.findUnique({ where: { id } })
}

// The difference in blast radius

// revalidatePath — invalidates an entire route's cached data
revalidatePath('/products/[id]', 'page') // Busts cache for EVERY product page
// Use case: when you genuinely need to invalidate all product pages (e.g., sitewide discount applied)

// revalidateTag — invalidates all data tagged with a specific cache key
revalidateTag('product-123-price') // Busts cache only for data tagged with this key
// Use case: when one product's price changes — don't bust every other product's cache

// ✅ Tag-based caching — surgical invalidation
async function getProductPrice(id: string) {
  const res = await fetch(`/api/products/${id}/price`, {
    next: {
      tags: [`product-${id}-price`], // Cache tag for this specific resource
      revalidate: false,             // Never auto-revalidate — wait for explicit invalidation
    },
  })
  return res.json()
}

// Server Action that mutates price
async function updatePrice(productId: string, newPrice: number) {
  'use server'
  await db.products.update({ where: { id: productId }, data: { price: newPrice } })
  revalidateTag(`product-${productId}-price`) // ✅ Surgical: only this product's price cache
  // NOT: revalidatePath('/products') — this would bust every product's cache
}

Browser timeline with 3 dynamic slots:

t=0ms   CDN returns static shell (SiteHeader + ProductHero + 3 <Suspense> fallbacks)
t=45ms  LivePrice slot resolves (fast cache hit) → Flight chunk arrives → fallback replaced
t=120ms CartButton slot resolves → Flight chunk arrives → fallback replaced
t=380ms Reviews slot resolves (slow DB query) → Flight chunk arrives → fallback replaced