ISRrevalidate: 30sServer Component

Incremental Static Regeneration

This page is statically generated but re-validates every 30 seconds. The data below was frozen at cache time — but the cache expires and silently regenerates in the background.

📊 "Live" Dashboard Stats (ISR cached)
Total Orders
59,682
Active Users
1,227
Revenue ($)
$149,550.3
Cache Snapshot
11:53:48 UTC

↑ Values change on re-validation (every 30s), not on every request. First request after 30s triggers background regeneration — users never wait.

🎤 Interview Answer"ISR is the best of both SSG and SSR. Pages start as static HTML for fast delivery, but after a configurable time window, Next.js regenerates the page in the background. Users always get a fast cached response; the staleness is bounded. Perfect for e-commerce product pages, pricing, or leaderboards."

ISR Timeline (Stale-While-Revalidate)

// revalidate = 30 (seconds)

// T=0s    → Page built, cache filled
// T=10s   → Request → CACHE HIT (instant)
// T=31s   → Request → CACHE HIT (still served!)
//           + background regeneration triggered
// T=32s   → Request → NEW cache filled
// T=33s   → Request → CACHE HIT (new data)

App Router — Two Ways to Set ISR

// Option 1: Page-level revalidation
export const revalidate = 30;  // seconds

// Option 2: Per-fetch revalidation
const data = await fetch("https://api.example.com/stats", {
  next: { revalidate: 30 }  // per-request ISR
});

// Option 3: On-demand revalidation (e.g. on CMS publish)
import { revalidatePath, revalidateTag } from "next/cache";
revalidatePath("/products");  // in a Server Action or Route Handler

Pages Router Equivalent

export async function getStaticProps() {
  const data = await fetchStats();
  return {
    props: { data },
    revalidate: 30,  // ← the ISR magic in Pages Router
  };
}
✅ Pros: Fast like SSG, stays fresh like SSR, no user-visible delay on regen · ❌ Cons: One request after expiry gets stale data (acceptable trade-off)