Incremental Static Regeneration (ISR)

Incremental Static Regeneration (ISR)

Incremental Static Regeneration (ISR) enables you to update static pages in the background without rebuilding your entire Next.js website.

Why ISR is Revolutionary

SSG is fast, but rebuilding thousands of e-commerce pages on every inventory change is unfeasible. SSR provides fresh data, but increases database load and latency.

ISR gives you the best of both worlds:

• Pages are served instantly from Edge CDN static caches.
• Pages automatically revalidate in the background at configurable time intervals.

Configuring Time-Based ISR

You can configure ISR using segment options or fetch options:

Option A: Route Segment Revalidation

// app/products/[id]/page.tsx
export const revalidate = 60; // Revalidate at most once every 60 seconds

export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const res = await fetch(`https://api.example.com/products/${id}`);
  const product = await res.json();

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold">{product.title}</h1>
      <p className="text-lg text-green-700">${product.price}</p>
    </div>
  );
}

Option B: Granular fetch() Revalidation

// Revalidate only this specific fetch call every 5 minutes (300s)
const res = await fetch('https://api.example.com/posts', {
  next: { revalidate: 300 },
});

The Stale-While-Revalidate Lifecycle

1. User requests page -> Server returns cached static HTML instantly.
2. If time > revalidate interval:
   - Next.js triggers a background re-render.
   - On successful build, Next.js updates the CDN Edge cache.
3. Next user request receives the fresh updated static page.

ISR Cheat Sheet

TL;DR

• ISR updates static content without needing a full site rebuild.
• Use export const revalidate = N in seconds to set a time-based cache lifetime.
• Users always receive fast static responses while updates re-render in the background.
• Combine time-based ISR with on-demand tag revalidation for maximum efficiency.