ISR in Next.js 16 — revalidate: 60 Meant 58 Seconds of Stale Buy Buttons During a Flash Sale

// ============================================
// Measuring ISR Stale Window
// ============================================

// ---- Add a build timestamp to the page ----

interface Product {
  id: string
  name: string
  price: number
  inventoryStatus: string
}

export default async function ProductPage({
  params,
}: {
  params: { slug: string }
}) {
  const buildTime = new Date().toISOString()

  const product: Product = await fetch(
    `https://api.example.com/products/${params.slug}`,
    { next: { revalidate: 60, tags: ['products'] } }
  ).then(r => r.json())

  // Log staleness metrics
  console.log({
    event: 'ISR_SERVE',
    slug: params.slug,
    renderTime: buildTime,
    dataTimestamp: product.updatedAt,
    stalenessSeconds:
      (Date.now() - new Date(product.updatedAt).getTime()) / 1000,
  })

  return (
    <div>
      <h1>{product.name}</h1>
      <p className="text-2xl font-bold">${product.price}</p>
      <BuyButton status={product.inventoryStatus} />
    </div>
  )
}

// ---- Add a version identifier for cache analysis ----

// Include this in the page HTML for debugging
export function CacheVersion({ renderedAt }: { renderedAt: string }) {
  return (
    <script
      dangerouslySetInnerHTML={{
        __html: `window.__RENDERED_AT = "${renderedAt}";`,
      }}
    />
  )
}

// ============================================
// On-Demand Revalidation — Webhook Handler
// ============================================

import { revalidatePath, revalidateTag } from 'next/cache'
import { NextRequest, NextResponse } from 'next/server'

// ---- Webhook endpoint called by CMS after data change ----

export async function POST(request: NextRequest) {
  const body = await request.json()
  const authHeader = request.headers.get('x-revalidation-secret')

  if (authHeader !== process.env.REVALIDATION_SECRET) {
    return NextResponse.json({ message: 'Unauthorized' }, { status: 401 })
  }

  const { type, value } = body

  switch (type) {
    case 'path':
      revalidatePath(value)
      return NextResponse.json({
        revalidated: true,
        type: 'path',
        value,
        timestamp: Date.now(),
      })

    case 'tag':
      revalidateTag(value)
      return NextResponse.json({
        revalidated: true,
        type: 'tag',
        value,
        timestamp: Date.now(),
      })

    default:
      return NextResponse.json(
        { message: 'Invalid type. Use "path" or "tag".' },
        { status: 400 }
      )
  }
}

// ---- Server Action for manual revalidation ----

export async function revalidateProducts() {
  'use server'
  revalidateTag('products')
  revalidatePath('/products')
}

// ---- Usage in product page: tag all pricing fetches ----

export default async function ProductPage({
  params,
}: {
  params: { slug: string }
}) {
  const product = await fetch(
    `https://api.example.com/products/${params.slug}`,
    {
      next: {
        revalidate: 300,
        tags: ['products', `product-${params.slug}`],
      },
    }
  ).then(r => r.json())

  return <ProductDetail product={product} />
}

// ============================================
// generateStaticParams + ISR
// ============================================

// ---- Pre-build top 100 products, ISR for the rest ----

interface Product {
  id: string
  slug: string
  popularity: number
}

export async function generateStaticParams() {
  const products: Product[] = await fetch(
    'https://api.example.com/products/top-100'
  ).then(r => r.json())

  return products.map((product) => ({
    slug: product.slug,
  }))
}

export default async function ProductPage({
  params,
}: {
  params: { slug: string }
}) {
  const product = await fetch(
    `https://api.example.com/products/${params.slug}`,
    { next: { revalidate: 300, tags: ['products'] } }
  ).then(r => r.json())

  return <ProductDetail product={product} />
}

// ---- Fallback: blocking generates on first visit ----

export const dynamicParams = true // or 'blocking'

// ---- Example: generate all CMS pages at build time ----

export async function generateStaticParams() {
  // Fetch all slugs from CMS
  const posts = await fetch('https://cms.example.com/posts')
    .then(r => r.json())

  return posts.map((post: { slug: string }) => ({
    slug: post.slug,
  }))
}

// ---- For very large catalogs: paginate the generation ----

export async function generateStaticParams() {
  const allSlugs: string[] = []
  let page = 1
  let hasMore = true

  while (hasMore) {
    const response = await fetch(
      `https://api.example.com/products?page=${page}&limit=500`
    ).then(r => r.json())

    allSlugs.push(...response.data.map((p: any) => p.slug))
    hasMore = response.hasMore
    page++

    // Safety limit
    if (page > 50) break
  }

  return allSlugs.map((slug) => ({ slug }))
}

// ============================================
// ISR + CDN Caching Configuration
// ============================================

// ---- next.config.js: Set default Cache-Control for ISR ----

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  async headers() {
    return [
      {
        source: '/products/:slug',
        headers: [
          {
            key: 'Cache-Control',
            value:
              'public, s-maxage=60, stale-while-revalidate=30',
          },
        ],
      },
    ]
  },
}

export default nextConfig

// ---- Per-page Cache-Control via middleware ----

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const response = NextResponse.next()

  // Apply different cache policies per route pattern
  if (request.nextUrl.pathname.startsWith('/products')) {
    response.headers.set(
      'Cache-Control',
      'public, s-maxage=60, stale-while-revalidate=30'
    )
  }

  if (request.nextUrl.pathname.startsWith('/pricing')) {
    // More aggressive freshness for pricing
    response.headers.set(
      'Cache-Control',
      'public, s-maxage=10, stale-while-revalidate=5'
    )
  }

  return response
}

// ---- CDN Purge after on-demand revalidation ----

export async function POST(request: NextRequest) {
  const { path, tag } = await request.json()

  // 1. Next.js on-demand revalidation
  if (path) revalidatePath(path)
  if (tag) revalidateTag(tag)

  // 2. Purge CDN cache (example: Cloudflare API)
  if (process.env.CLOUDFLARE_ZONE_ID) {
    await fetch(
      `https://api.cloudflare.com/client/v4/zones/${process.env.CLOUDFLARE_ZONE_ID}/purge_cache`,
      {
        method: 'POST',
        headers: {
          Authorization: `Bearer ${process.env.CLOUDFLARE_API_TOKEN}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          files: [`https://yoursite.com${path}`],
        }),
      }
    )
  }

  return NextResponse.json({ revalidated: true })
}

// ============================================
// Mixing ISR and PPR on the Same Page
// ============================================

import { Suspense } from 'react'

// ---- ISR: Product description (changes hourly) ----

export default async function ProductPage({
  params,
}: {
  params: { slug: string }
}) {
  const product = await fetch(
    `https://api.example.com/products/${params.slug}`,
    { next: { revalidate: 3600, tags: ['catalog'] } }
  ).then(r => r.json())

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>

      {/* PPR: Buy button always fresh */}
      <Suspense fallback={<BuyButtonSkeleton />}>
        <BuyButton slug={params.slug} />
      </Suspense>
    </div>
  )
}

// ---- PPR: Buy button with fresh inventory ----

async function BuyButton({ slug }: { slug: string }) {
  const inventory = await fetch(
    `https://api.example.com/inventory/${slug}`,
    { cache: 'no-store' } // Always fresh — no staleness
  ).then(r => r.json())

  return (
    <button disabled={!inventory.inStock}>
      {inventory.inStock ? 'Buy Now' : 'Out of Stock'}
    </button>
  )
}

function BuyButtonSkeleton() {
  return (
    <div className="h-12 w-full animate-pulse rounded bg-muted" />
  )
}

# ============================================
# ISR Debugging Commands
# ============================================

# === Build output: check which routes use ISR ===
# ○ = static, ● = ISR (with revalidate value), ƒ = dynamic
npx next build 2>&1 | head -50

# === Cache status header ===
# HIT = served from ISR cache
# STALE = cache expired, regeneration in progress
# MISS = no cache, fresh render
curl -I https://yoursite.com/products/slug | grep -i 'x-nextjs-cache'

# === Check ISR regeneration frequency ===
# Add server logs to your page component:
# console.log('ISR_RENDER', { slug, timestamp: Date.now() })
# Then grep your logs:
cat logs/app.log | grep 'ISR_RENDER' | tail -20

# === Force regeneration by visiting the page ===
# ISR regenerates on first request after timer expiry
curl https://yoursite.com/products/slug > /dev/null

# === Check if the ISR page is serving fresh data ===
# Add a hidden timestamp to the page HTML:
# Then grep the output:
curl -s https://yoursite.com/products/slug | grep -o 'RENDERED_AT:[0-9]*'