Time-Based Revalidation (ISR)

Static speed, fresh-enough data

Time-based revalidation is the App Router's flavor of Incremental Static Regeneration (ISR). Pages are pre-rendered and served from cache; after the revalidate interval, the next request triggers a background re-render. Users still get the cached version instantly — no "loading new content" spinner.

Two scopes

Scope	Setting
Per fetch	`fetch(url, { next: { revalidate: 60 } })`
Per route segment	`export const revalidate = 60` at the top of the page or layout

The lifecycle in one line

Fresh request → render → cache. Within revalidate window → serve cache. After window → serve stale, kick off background re-render. Next request → serve fresh.

Choose the revalidation interval from tolerated staleness, not from the publishing schedule alone. Content edited daily may still need instant publication. In that case, combine a long time window with on-demand invalidation instead of paying for constant background churn. ISR is not a cron job. Crossing the interval does not regenerate the page by itself; the next request initiates the refresh while receiving stale content. A requirement tied to a clock needs a scheduler or webhook. Use a short interval and record the first request, a request inside the window, the first stale request after it, and the following fresh request. Repeat with no traffic and with a failed regeneration so the fallback behavior is understood.

Code

Per-fetch ISR·tsx

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

Per-segment ISR·tsx

// app/blog/page.tsx
export const revalidate = 300;

export default async function BlogPage() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return <PostList posts={posts} />;
}

Force a route to one mode·tsx

// app/(marketing)/page.tsx
export const dynamic = 'force-static';   // build once, never re-render

// app/(app)/dashboard/page.tsx
export const dynamic = 'force-dynamic';  // render every request

Static speed, fresh-enough data

Two scopes

The lifecycle in one line

Code

External links

Exercise

Progress

Comments 0