SSR, SSG, ISR & CSR Rendering Architectures

// 1. In a page or data fetcher (app/products/[id]/page.tsx)
async function getProduct(id: string) {
  const res = await fetch(`https://api.example.com/products/${id}`, {
    next: {
      tags: [`product-${id}`], // Tagged for on-demand revalidation
      revalidate: 3600,         // Fallback time-based ISR: 1 hour
    },
  });
  return res.json();
}

// 2. In a webhook route handler triggered by CMS / DB updates (app/api/revalidate/route.ts)
import { revalidateTag } from 'next/cache';
import { NextRequest, NextResponse } from 'next/server';

export async function POST(req: NextRequest) {
  const { productId, secret } = await req.json();
  
  if (secret !== process.env.REVALIDATION_SECRET) {
    return NextResponse.json({ message: 'Invalid token' }, { status: 401 });
  }

  // Purge edge cache specifically for this product immediately!
  revalidateTag(`product-${productId}`);
  return NextResponse.json({ revalidated: true, now: Date.now() });
}