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.

Practice

1. What is the main purpose of Incremental Static Regeneration (ISR) in Next.js?

easy

A. To disable static generation completely

B. To generate pages only on the client side

C. To update static pages after build without rebuilding the entire site

D. To force server-side rendering on every request

Solution

1. Step 1: Understand ISR concept

   ISR allows static pages to be updated after the initial build without rebuilding the whole site.

2. Step 2: Compare options

   Options B, C, and D describe client-side rendering, disabling static generation, or forcing server-side rendering, which are not ISR features.

3. Final Answer:

   To update static pages after build without rebuilding the entire site -> Option C

4. Quick Check:

   ISR updates static pages incrementally = A [OK]

Hint: ISR updates static pages without full rebuilds [OK]

Common Mistakes:

• Confusing ISR with client-side rendering
• Thinking ISR disables static generation
• Believing ISR forces server-side rendering

2. Which Next.js function should you use to enable ISR by specifying a revalidation time?

easy

A. getServerSideProps

B. getStaticProps

C. getInitialProps

D. useEffect

Solution

1. Step 1: Identify ISR enabling function

   ISR is enabled by returning a revalidate property inside getStaticProps.

2. Step 2: Check other options

   getServerSideProps is for server-side rendering, getInitialProps is legacy, and useEffect is a React hook for client-side effects.

3. Final Answer:

   getStaticProps -> Option B

4. Quick Check:

   ISR uses getStaticProps with revalidate = D [OK]

Hint: Use getStaticProps with revalidate for ISR [OK]

Common Mistakes:

• Using getServerSideProps instead of getStaticProps
• Confusing client-side hooks with data fetching
• Using deprecated getInitialProps for ISR

3. Given this code snippet, what will be the behavior of the page?

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

medium

A. The page throws a syntax error

B. The page never updates after build

C. The page updates on every request

D. The page updates every 10 seconds with new time

Solution

1. Step 1: Analyze revalidate property

   The revalidate: 10 means Next.js will regenerate the page at most every 10 seconds.

2. Step 2: Understand page update behavior

   The page will serve the static content initially, then update the static page in the background every 10 seconds.

3. Final Answer:

   The page updates every 10 seconds with new time -> Option D

4. Quick Check:

   revalidate 10 means update every 10 seconds = A [OK]

Hint: revalidate sets update interval in seconds [OK]

Common Mistakes:

• Thinking page never updates after build
• Confusing ISR with server-side rendering
• Assuming syntax error due to revalidate

4. Identify the error in this ISR setup:

export async function getStaticProps() {
  return {
    props: { data: 'Hello' },
    revalidate: '60',
  };
}

medium

A. revalidate must be a number, not a string

B. props must be a function, not an object

C. getStaticProps cannot be async

D. Missing fallback property

Solution

1. Step 1: Check revalidate type

   The revalidate property must be a number representing seconds, not a string.

2. Step 2: Verify other parts

   props is correctly an object, getStaticProps can be async, and fallback is unrelated here.

3. Final Answer:

   revalidate must be a number, not a string -> Option A

4. Quick Check:

   revalidate type must be number = C [OK]

Hint: revalidate must be numeric seconds, not string [OK]

Common Mistakes:

• Passing revalidate as string instead of number
• Thinking getStaticProps can't be async
• Confusing fallback with revalidate

5. You want a blog page to update its static content every 5 minutes but also show a fallback loading page on first visit to new posts. Which ISR setup is correct?

hard

A. Use getStaticProps with revalidate: 300 and fallback: 'blocking' in getStaticPaths

B. Use getServerSideProps with revalidate: 300

C. Use getStaticProps with revalidate: '300' and no fallback

D. Use getStaticPaths with fallback: false and no revalidate

Solution

1. Step 1: Understand ISR with fallback

   To update static pages every 5 minutes (300 seconds) and show fallback loading for new pages, use revalidate: 300 in getStaticProps and fallback: 'blocking' in getStaticPaths.

2. Step 2: Check other options

   Use getServerSideProps with revalidate: 300 uses server-side rendering, not ISR. Use getStaticProps with revalidate: '300' and no fallback has revalidate as string and no fallback. Use getStaticPaths with fallback: false and no revalidate disables fallback and revalidate, so no ISR updates or loading fallback.

3. Final Answer:

   Use getStaticProps with revalidate: 300 and fallback: 'blocking' in getStaticPaths -> Option A

4. Quick Check:

   ISR with fallback blocking and revalidate 300 = B [OK]

Hint: Combine revalidate with fallback: 'blocking' for ISR + loading [OK]

Common Mistakes:

• Using server-side rendering instead of ISR
• Passing revalidate as string
• Setting fallback to false disables loading fallback