Incremental Static Regeneration

The Pattern

ISR lets you cache a page at the CDN for a fixed window, then regenerate it in the background on the next request. Stale content serves instantly; fresh content replaces it atomically.

When to Use

• •Product pages that change a few times per day
• •Blog posts with occasional edits
• •Leaderboards that update every few minutes
• •Any page where TTFB matters more than real-time accuracy

Implementation

export const revalidate = 60

export default async function Page() {
  const data = await fetch(
    'https://api.example.com/products',
    { next: { revalidate: 60 } }
  )
  const products = await data.json()

  return (
    <div>
      {products.map(p => (
        <ProductCard key={p.id} {...p} />
      ))}
    </div>
  )
}

Set revalidate at the route segment level or per-fetch. The lower value wins.

On-Demand Revalidation

For CMS-driven content, call revalidateTag or revalidatePath from a Route Handler when content changes. This purges the CDN cache instantly without waiting for the time window.

Gotchas

• •ISR only works on Vercel and Netlify; self-hosted Next.js falls back to SSR.
• •The first request after expiry triggers regeneration — that request still gets the stale page.
• •Keep revalidation windows reasonable. Setting 1 second on a high-traffic page will hammer your origin.