Time-Based Revalidation (ISR)

~20 min · ISR, revalidate, stale-while-revalidate

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

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.

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

External links

Incremental Static Regeneration

Exercise

Set up an ISR product page and observe the behavior in dev tools: first request renders, refresh inside the window serves stale, refresh after the window triggers a regeneration on the second hit.