Cache invalidation strategies in NextJS - Step-by-Step Execution

Concept Flow - Cache invalidation strategies

Start: Data Cached

↓

Check Cache Validity

↓

Use Cache

↓

Fetch Fresh Data

↓

Update Cache

↓

End

This flow shows how cache is checked for validity, used if valid, or invalidated and refreshed if not.

Execution Sample

NextJS

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

This Next.js code fetches data at build time and sets cache to revalidate every 10 seconds.

Execution Table

Step	Action	Cache State	Condition	Result
1	Initial build	Cache empty	No cache	Fetch data and cache it
2	Request at 5s	Cache valid	5 < 10 seconds	Use cached data
3	Request at 12s	Cache expired	12 > 10 seconds	Invalidate cache and fetch fresh data
4	Request at 15s	Cache valid	3 seconds since last fetch < 10	Use cached data
5	Request at 25s	Cache expired	10 seconds since last fetch	Invalidate cache and fetch fresh data
6	End	Cache updated	N/A	Stop

💡 Cache is invalidated and refreshed when time since last fetch exceeds revalidate period (10 seconds).

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	Final
cacheTimestamp	null	0s (build time)	0s (still valid)	12s (updated)	12s (valid)	25s (updated)	25s
cacheData	null	data fetched	data reused	data refreshed	data reused	data refreshed	data refreshed

Key Moments - 2 Insights

Why does the cache get invalidated at 12 seconds but not at 5 seconds?

Because the revalidate time is 10 seconds, at 5 seconds the cache is still valid (5 < 10), but at 12 seconds it is expired (12 > 10), so it triggers invalidation and data refresh as shown in execution_table rows 2 and 3.

What happens to the cache data after invalidation?

After invalidation, fresh data is fetched and the cache is updated with new data and timestamp, as seen in execution_table rows 3 and 5.

Visual Quiz - 3 Questions

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

A Cache valid

B Cache expired

C Cache empty

D Cache invalidated

💡 Hint

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

At which step does the cache get invalidated for the first time?

A Step 2

B Step 3

C Step 1

D Step 5

💡 Hint

Look for the first 'Cache expired' and 'Invalidate cache' action in the execution_table.

If the revalidate time changed to 20 seconds, when would the cache invalidate next after step 1?

A At 12 seconds

B At 5 seconds

C At 25 seconds

D At 21 seconds

💡 Hint

Compare the revalidate time with the timestamps in variable_tracker to find when cache expires.

Concept Snapshot

Cache Invalidation Strategies in Next.js:
- Use revalidate in getStaticProps to set cache lifetime.
- Cache is valid until revalidate seconds pass.
- After expiry, cache is invalidated and fresh data fetched.
- This keeps data fresh without rebuilding every request.
- Helps balance speed and data accuracy.

Full Transcript

This visual execution shows how Next.js cache invalidation works using the revalidate property in getStaticProps. Initially, data is fetched and cached at build time. Subsequent requests within the revalidate period use cached data. Once the revalidate time passes, the cache is invalidated and fresh data is fetched and cached again. This cycle repeats to keep data fresh while improving performance by avoiding unnecessary fetches. Variables like cacheTimestamp and cacheData track cache freshness and content. Key moments clarify why cache is used or refreshed at specific times. Quiz questions test understanding of cache state changes and timing.