ISR allows you to update static pages after you've built your site, without needing to rebuild the entire application.
Interactive Simulation Engine
ISR: Stale-While-Revalidate
Background Cache Regeneration
User Sees
Data from: 10:00:00 AM
CACHE: STALE
BG Runner
Next.js Server(Background)
A user requests a page that has passed its revalidation period. Next.js serves the stale version from cache instantly.
Executable Code Workbench
page.tsx
Live Code Editor1// Revalidate every 60 seconds
2export const revalidate = 60
3
4export default async function Page() {
5 const data = await fetch('https://api.example.com/data')
6 // ...
7}Mental Model
A vending machine that periodically refills itself with fresh items. Most of the time it's static, but it updates on a schedule.
Why This Exists
To get the benefits of static (speed) with the flexibility of dynamic (fresh data) for sites with thousands of pages.
Critical Note
"Developers often confuse this pattern with traditional client React. Use the Live Code Workbench above to simulate execution."