ISR (Incremental Static Regeneration) in NextJS - Step-by-Step Execution

Concept Flow - ISR (Incremental Static Regeneration)

Build Time

↓

Generate Static Page

↓

Serve Static Page

↓

User Request

↓

Check Revalidate Time Passed?

No→Serve Cached Page

Yes↓

Trigger Background Regeneration

↓

Serve Cached Page Immediately

↓

Update Static Page in Background

↓

Next Request Gets Updated Page

ISR lets Next.js serve a static page immediately, then update it in the background after a set time, so users get fast pages that stay fresh.

Execution Sample

NextJS

export async function getStaticProps() {
  return {
    props: { time: Date.now() },
    revalidate: 10,
  };
}

This code generates a static page with a timestamp and tells Next.js to update it every 10 seconds in the background.

Execution Table

Step	Action	Time	Page Served	Background Regeneration
1	Build static page	T0	Page with time T0	No
2	User requests page at T5	T0 + 5s	Page with time T0	No (revalidate 10s not passed)
3	User requests page at T11	T0 + 11s	Page with time T0	Yes (trigger regeneration)
4	Serve cached page immediately	T0 + 11s	Page with time T0	Regeneration running in background
5	Background regeneration finishes	T0 + 12s	Page updated to time T0+12s	No
6	User requests page at T15	T0 + 15s	Page with time T0+12s	No (revalidate 10s from last update)
7	User requests page at T23	T0 + 23s	Page with time T0+12s	Yes (trigger regeneration)
8	Serve cached page immediately	T0 + 23s	Page with time T0+12s	Regeneration running in background
9	Background regeneration finishes	T0 + 24s	Page updated to time T0+24s	No
10	User requests page at T30	T0 + 30s	Page with time T0+24s	No
11	End of trace	-	-	-

💡 Execution stops after several requests showing ISR serving cached pages and regenerating in background after revalidate time.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 5	After Step 7	After Step 9	Final
Page Content Time	undefined	T0	T0	T0+12s	T0+12s	T0+24s	T0+24s
Background Regeneration	No	No	Yes	No	Yes	No	No

Key Moments - 3 Insights

Why does the user get the old page immediately even when regeneration is triggered?

Because ISR serves the cached page instantly to avoid delay, while regeneration happens in the background (see steps 3 and 4 in execution_table).

When exactly does Next.js start regenerating the page?

Next.js starts regeneration only after the revalidate time has passed since the last update and a user requests the page (step 3 and 7).

Does the user ever see a loading or waiting screen during regeneration?

No, users always get the cached page immediately; regeneration is invisible and happens behind the scenes (steps 4 and 8).

Visual Quiz - 3 Questions

Look at the execution_table, what is the page content time served at step 6?

A T0

B T0+12s

C T0+24s

D Undefined

💡 Hint

Check the 'Page Served' column at step 6 in the execution_table.

At which step does the background regeneration first start?

A Step 2

B Step 5

C Step 3

D Step 7

💡 Hint

Look at the 'Background Regeneration' column in the execution_table to find when it changes to 'Yes' first.

If the revalidate time was changed to 5 seconds, how would step 3 change?

A Regeneration would trigger earlier, at step 2

B Regeneration would still trigger at step 3

C Regeneration would trigger later, after step 3

D No regeneration would happen

💡 Hint

Compare the timing of user requests and revalidate time in the execution_table and variable_tracker.

Concept Snapshot

ISR (Incremental Static Regeneration) in Next.js:
- Generates static pages at build time.
- Serves cached pages instantly on user requests.
- After 'revalidate' seconds, triggers background regeneration.
- Users never wait; they get cached page while update happens.
- Next requests get updated page after regeneration finishes.

Full Transcript

Incremental Static Regeneration (ISR) in Next.js lets you build static pages once, serve them fast, and update them in the background after a set time. When a user requests a page, Next.js checks if the revalidate time has passed since the last update. If not, it serves the cached page immediately. If yes, it serves the cached page but triggers a background regeneration to update the page. This way, users always get a fast response and fresh content without waiting. The example code shows how to set a revalidate time of 10 seconds. The execution table traces requests over time, showing when cached pages are served and when regeneration happens. Key points are that regeneration is invisible to users and only starts after the revalidate time passes on a user request. Changing the revalidate time affects when regeneration triggers. This approach balances speed and freshness for static pages.