Revalidation patterns in NextJS - Step-by-Step Execution

Concept Flow - Revalidation patterns

Page Request

↓

Check Cache

↓

Serve Cached

↓

Check Revalidation

↓

Fetch New Data

↓

Update Cache

↓

Serve Updated

When a page is requested, Next.js checks if cached data exists. If cached, it serves it immediately. Then it checks if revalidation is needed. If yes, it fetches fresh data, updates the cache, and serves the updated page.

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	Action	Cache State	Revalidation Check	Result
1	Page requested	No cache	N/A	Fetch data and cache it
2	Page requested again within 10s	Cache valid	No	Serve cached page
3	Page requested after 10s	Cache expired	Yes	Fetch new data, update cache, serve updated page
4	Page requested immediately after update	Cache valid	No	Serve cached page

💡 Execution stops after serving cached or updated page depending on cache validity and revalidation timing.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
cache	empty	data fetched and stored	unchanged	updated with new data	unchanged
revalidate timer	10s set	countdown starts	still counting	reset after update	countdown starts again

Key Moments - 2 Insights

Why does Next.js serve cached data even if revalidation is needed?

Next.js serves cached data immediately for fast response, then triggers background revalidation to update cache for future requests, as shown in execution_table rows 2 and 3.

What happens if a request comes exactly when the cache expires?

The cache is considered expired, so Next.js fetches fresh data, updates the cache, and serves the updated page, as in execution_table row 3.

Visual Quiz - 3 Questions

Look at the execution_table, what is served at step 2 when the cache is still valid?

A Fresh data fetched and served

B Page not served, waiting for data

C Cached page served immediately

D Error because cache is stale

💡 Hint

Check the 'Result' column in execution_table row 2

At which step does Next.js update the cache with new data?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Cache State' and 'Result' columns in execution_table row 3

If the revalidate time was set to 20 seconds instead of 10, how would step 3 change?

A Step 3 would happen after 20 seconds instead of 10

B Step 3 would happen immediately

C Step 3 would never happen

D Step 3 would happen before step 2

💡 Hint

Refer to the 'revalidate timer' variable in variable_tracker and timing in execution_table

Concept Snapshot

Next.js revalidation pattern:
- getStaticProps fetches data at build time
- revalidate sets seconds to refresh cached page
- Cached page served immediately for speed
- Background fetch updates cache after revalidate time
- Ensures fast and fresh content without blocking users

Full Transcript

When a user requests a Next.js page using getStaticProps with a revalidate time, Next.js first checks if cached data exists. If no cache exists, it fetches data and caches it. If cache exists and is still valid within the revalidate time, it serves the cached page immediately. When the cache expires, Next.js serves the cached page but triggers a background fetch to update the cache with fresh data. This pattern balances fast page loads with up-to-date content. Variables like cache and revalidate timer track the data and timing. This flow repeats for each page request, ensuring users get quick responses and fresh data after the revalidation period.