Revalidation strategies (time-based) in NextJS - Step-by-Step Execution

Concept Flow - Revalidation strategies (time-based)

Initial Request

↓

Serve Cached Page

↓

Check Revalidation Time

↓

Fetch New Data

↓

Update Cache

↓

Next Request Uses Updated Cache

This flow shows how Next.js serves a cached page and triggers background revalidation after a set time, updating the cache for future requests.

Execution Sample

NextJS

export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 10
  };
}

This code fetches data at build time and sets the page to revalidate every 10 seconds.

Execution Table

Step	Request Time (s)	Cache Status	Revalidation Check (time since last update)	Action Taken	Page Served
1	0	No cache	N/A	Fetch data and cache	Fresh page with data
2	5	Cached (5s old)	5 < 10	Serve cached page	Cached page
3	10	Cached (10s old)	10 >= 10	Serve cached page + trigger background revalidation	Cached page
4	11	Revalidating	N/A	Fetch new data and update cache	Cached page (still)
5	15	Cached (4s old)	4 < 10	Serve cached page	Updated cached page
6	21	Cached (10s old)	10 >= 10	Serve cached page + trigger background revalidation	Updated cached page
7	22	Revalidating	N/A	Fetch new data and update cache	Cached page (still)
8	30	Cached (8s old)	8 < 10	Serve cached page	Updated cached page
Exit	N/A	N/A	N/A	Stop after last request	N/A

💡 Execution stops after the last request at 30 seconds.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	After 6	After 7	Final
Cache Timestamp (seconds)	N/A	0	0	0	11	11	11	22	22
Cache Age (seconds)	N/A	0	5	10	0	4	10	0	8
Revalidation Triggered	No	No	No	Yes	No	No	Yes	No	No

Key Moments - 3 Insights

Why does the page serve the cached version even when revalidation is triggered?

Because Next.js serves the existing cached page immediately to avoid delay, while revalidation happens in the background (see execution_table step 3).

What happens if a request comes before the revalidation finishes?

The cached page is served again until the background revalidation updates the cache (see execution_table step 4 and 5).

How is the cache age calculated for revalidation?

Cache age is the time difference between the current request and the last cache update timestamp (see variable_tracker Cache Age).

Visual Quiz - 3 Questions

Look at the execution table, what is the cache age at step 5?

A 4 seconds

B 10 seconds

C 5 seconds

D 0 seconds

💡 Hint

Check the 'Cache Age (seconds)' column at step 5 in the variable_tracker.

At which step does Next.js trigger background revalidation for the first time?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look for 'Revalidation Check' and 'Action Taken' columns in the execution_table.

If the revalidate time was changed to 5 seconds, what would happen at step 2?

A Serve cached page only

B Fetch new data immediately

C Serve cached page and trigger revalidation

D Serve stale page without revalidation

💡 Hint

Compare the 'Revalidation Check' logic with the new revalidate time in the concept_flow.

Concept Snapshot

Next.js time-based revalidation:
- Use 'revalidate' in getStaticProps to set seconds.
- Serve cached page immediately.
- After 'revalidate' seconds, trigger background fetch.
- Update cache after fetch.
- Next requests get updated page.
- Improves performance and freshness.

Full Transcript

This visual execution shows how Next.js handles time-based revalidation. Initially, the page is built and cached. For requests before the revalidate time, the cached page is served directly. When the revalidate time passes, Next.js serves the cached page but triggers a background fetch to update the cache. Subsequent requests get the updated page. Variables like cache timestamp and age track when to revalidate. This strategy balances fast responses with fresh data.