Time-based Revalidation (ISR)

Automatically update static pages in the background on a timer.

Next.js6 min readConcept 26 of 65

Incremental Static Regeneration

Time-based Revalidation (historically known as ISR) allows you to update static pages after you've already built your site, without needing a full redeploy.

It caches the data just like a normal static fetch, but attaches an expiration timer to that specific cache entry.

The best of both worlds

Traditionally, you had to choose: build the page statically for maximum speed (but it never updates), or render it dynamically on the server (it's always fresh, but slower).

Time-based revalidation gives you the speed of static rendering with the freshness of dynamic rendering. The server simply serves the cached file to the user instantly.

Setting the timer

You can configure this per-request by adding an option to fetch(): fetch('https://...', { next: { revalidate: 60 } }).

Alternatively, you can apply it to an entire route by exporting a constant from your page.tsx file: export const revalidate = 60;.

Stale-While-Revalidate

Watch the lifecycle of ISR. A request made BEFORE the timer expires simply returns the cached data. A request made AFTER the timer expires STILL returns the stale data, but triggers a background rebuild.

5s
revalidate: 5
User
FRESH
Data Cache
Data v1
GET /blog
v1 (Fresh)
GET /blog
v1 (Stale)
Server
Database
Trigger Rebuild
New v2

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1A page is set to `{ revalidate: 60 }`. 65 seconds have passed. What happens when User A requests the page?
  2. 2How can you apply time-based revalidation to an entire route segment, affecting all components inside it?

Remember this

  • Time-based revalidation is also known as ISR.
  • It allows static pages to update automatically in the background.
  • The first request after the timer expires serves STALE data, but triggers a rebuild.
  • Use { next: { revalidate: 60 } } on fetch, or export const revalidate = 60; on routes.
  • Do not use it for data requiring instant updates upon user action.

Done with this concept?

Mark it complete to track your progress. No login needed.