Data cache behavior in NextJS - Step-by-Step Execution

Concept Flow - Data cache behavior

Request for Data

↓

Check Cache

↓

Return Cached

↓

Store in Cache

↓

Return Data

When Next.js requests data, it first checks the cache. If data is found (cache hit), it returns it immediately. If not (cache miss), it fetches from the server, stores it in cache, then returns it.

Execution Sample

NextJS

async function getData() {
  if (cache.has('key')) {
    return cache.get('key');
  }
  const data = await fetchDataFromAPI();
  cache.set('key', data);
  return data;
}

This function checks a cache for data by key, fetches from API if missing, stores it, then returns the data.

Execution Table

Step	Action	Cache State	Data Returned	Notes
1	Check if cache has 'key'	{}	None	Cache is empty, miss occurs
2	Fetch data from API	{}	None	Data is being fetched asynchronously
3	Store data in cache with 'key'	{"key": "data"}	None	Cache updated with new data
4	Return data	{"key": "data"}	"data"	Data returned to caller
5	Next call: Check cache for 'key'	{"key": "data"}	"data"	Cache hit, data returned immediately

💡 Execution stops after data is returned from cache or API fetch completes

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 5
cache	{}	{}	{"key": "data"}	{"key": "data"}
data	undefined	undefined	"data"	"data"

Key Moments - 2 Insights

Why does the function fetch data only once even if called multiple times?

Because after the first fetch, the data is stored in the cache (see Step 3 in execution_table). Subsequent calls find the data in cache (Step 5) and return it immediately without fetching again.

What happens if the cache is empty when getData is called?

The function detects a cache miss (Step 1), fetches data from the API (Step 2), stores it in cache (Step 3), then returns it (Step 4).

Visual Quiz - 3 Questions

Look at the execution table, what is the cache state after Step 3?

A {"key": "data"}

B {}

C undefined

D {"key": undefined}

💡 Hint

Check the 'Cache State' column for Step 3 in the execution_table

At which step does the function return data for the first time?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Data Returned' column to see when data is first returned

If the cache already contains data, which step is skipped?

A Step 1

B Step 2

C Step 4

D Step 5

💡 Hint

Refer to the 'Action' column to see when data fetching is bypassed

Concept Snapshot

Data cache behavior in Next.js:
- Check cache before fetching
- If cache hit, return cached data immediately
- If cache miss, fetch from server
- Store fetched data in cache
- Subsequent calls use cached data
This improves speed and reduces server load.

Full Transcript

In Next.js, when data is requested, the system first checks if the data is already stored in a cache. If it is, this is called a cache hit, and the cached data is returned immediately, making the response fast. If the data is not in the cache, called a cache miss, Next.js fetches the data from the server or API. After fetching, it stores the data in the cache for future requests. This way, the next time the same data is needed, it can be served quickly from the cache without fetching again. This process helps improve performance and reduce unnecessary server calls.