Fetch caching behavior in NextJS - Step-by-Step Execution

Concept Flow - Fetch caching behavior

Start Fetch Request

↓

Check Cache for URL

↓

Return Cached

↓

Use Cached

↓

Store in Cache

↓

Use Response

↓

End

This flow shows how a fetch request first checks the cache, returns cached data if available, or fetches from network and caches the response.

Execution Sample

NextJS

const res = await fetch('https://api.example.com/data', { cache: 'force-cache' });
const data = await res.json();
console.log(data);

Fetches data from an API using Next.js fetch with cache set to 'force-cache' to reuse cached response if available.

Execution Table

Step	Action	Cache Status	Network Request	Result
1	Start fetch for URL	Check cache	No	Waiting
2	Cache hit found	Hit	No	Return cached response
3	Parse cached response	Hit	No	Data ready
4	Output data	Hit	No	Data logged
5	Start fetch for URL	Check cache	No	Waiting
6	Cache miss found	Miss	Yes	Send network request
7	Receive network response	Miss	Yes	Response received
8	Store response in cache	Miss	Yes	Cache updated
9	Parse response	Miss	No	Data ready
10	Output data	Miss	No	Data logged

💡 Execution stops after data is logged from either cached or network response.

Variable Tracker

Variable	Start	After Step 2	After Step 7	After Step 8	Final
cacheStatus	undefined	Hit	Miss	Miss	Miss
networkRequestSent	false	false	true	true	true
responseData	undefined	cached data	undefined	network data	network data

Key Moments - 3 Insights

Why does fetch sometimes not make a network request?

Because the cache has a valid response (cache hit), fetch returns cached data without network request, as shown in execution_table rows 2-4.

What happens when the cache does not have the requested data?

Fetch makes a network request to get fresh data, then stores it in cache for future use, as shown in execution_table rows 6-9.

Does fetch always update the cache after a network request?

Yes, after a cache miss and network fetch, the response is stored in cache for next time, shown in execution_table row 8.

Visual Quiz - 3 Questions

Look at the execution table, at which step is the network request sent when cache misses?

A Step 2

B Step 4

C Step 6

D Step 9

💡 Hint

Check the 'Network Request' column for 'Yes' when cache status is 'Miss'.

According to variable_tracker, what is the value of 'cacheStatus' after step 2?

A Hit

B Miss

C undefined

D false

💡 Hint

Look at the 'cacheStatus' row under 'After Step 2' column.

If the cache always misses, how would the 'networkRequestSent' variable change in the table?

A It would be 'false' for all steps

B It would be 'true' at every fetch attempt step

C It would be 'true' only at step 2

D It would be 'undefined'

💡 Hint

Consider that a cache miss triggers a network request each time.

Concept Snapshot

Fetch caching behavior in Next.js:
- fetch() checks cache first
- If cache hit, returns cached response
- If cache miss, makes network request
- Network response is stored in cache
- cache option controls this behavior (e.g., 'force-cache')

Full Transcript

This visual trace shows how Next.js fetch caching works. When fetch is called, it first checks if the requested URL response is in cache. If yes, it returns the cached data immediately without a network request. If no cached data is found, fetch makes a network request to get fresh data, then stores that response in cache for future use. Variables like cacheStatus and networkRequestSent track this process. This helps improve performance by reusing data when possible and only fetching new data when needed.