On-demand revalidation in NextJS - Step-by-Step Execution

Concept Flow - On-demand revalidation

User requests page

↓

Serve cached page

↓

Trigger revalidation request

↓

Next.js regenerates page in background

↓

Update cache with new page

↓

Next user gets updated page

When a user requests a page, Next.js serves the cached version immediately. Then, it triggers a background regeneration to update the cache for future users.

Execution Sample

NextJS

export default async function handler(req, res) {
  await res.revalidate('/path')
  res.send('Revalidated')
}

This code triggers on-demand revalidation for the '/path' page when the GET request is made.

Execution Table

Step	Action	Result	Cache State	User Response
1	User requests '/path'	Serve cached page	Cache has old page	Old page content shown
2	Revalidation triggered	Start background regeneration	Cache still old page	No change to user
3	Page regenerated	New page generated	Cache updated with new page	No immediate user impact
4	Next user requests '/path'	Serve updated cached page	Cache has new page	New page content shown
5	No further revalidation	Cache remains fresh	Cache has new page	New page content shown

💡 Revalidation updates cache in background; users always get cached page immediately.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
cache	old page	old page	new page	new page	new page
user_response	none	old page shown	old page shown	new page shown	new page shown

Key Moments - 2 Insights

Why does the first user still see the old page after revalidation is triggered?

Because revalidation happens in the background after serving the cached page, the first user gets the old cached content immediately (see execution_table step 1 and 2).

When does the cache update with the new page content?

The cache updates only after the background regeneration finishes (see execution_table step 3), so new users get the updated page.

Visual Quiz - 3 Questions

Look at the execution table, what is the cache state after step 2?

A Cache is empty

B Cache has new page

C Cache has old page

D Cache is invalid

💡 Hint

Check the 'Cache State' column for step 2 in the execution_table.

At which step does the user start seeing the updated page content?

A Step 1

B Step 4

C Step 2

D Step 3

💡 Hint

Look at the 'User Response' column in the execution_table to find when new content is served.

If revalidation took longer, how would the cache state change at step 3?

A Cache remains old page longer

B Cache updates immediately

C Cache clears automatically

D Cache serves error page

💡 Hint

Consider the cache update timing shown in variable_tracker and execution_table step 3.

Concept Snapshot

On-demand revalidation lets Next.js update cached pages after serving them.
Users get fast responses from cache.
Revalidation runs in background to refresh cache.
New users see updated pages after regeneration.
Use res.revalidate(path) in API routes to trigger.

Full Transcript

On-demand revalidation in Next.js means when a user requests a page, Next.js serves the cached version immediately for speed. Then, it triggers a background process to regenerate the page and update the cache. This way, the first user sees the old cached page, but the cache updates for future users. The process involves serving the cached page, triggering revalidation, regenerating the page, updating the cache, and then serving the updated page to new users. This keeps pages fresh without slowing down user experience. Developers trigger this using res.revalidate('/path') in API routes or server actions.