Request memoization in NextJS - Step-by-Step Execution

Concept Flow - Request memoization

Start Request

↓

Check Cache for Request

↓

Return Cached

↓

Use Data

↓

Render Response

When a request comes in, the system first checks if the response is cached. If yes, it returns cached data. If no, it fetches fresh data, stores it in cache, then uses it.

Execution Sample

NextJS

import { cache } from 'react';

const fetchData = cache(async (url) => {
  const res = await fetch(url);
  return res.json();
});

This code memoizes fetchData so repeated calls with the same URL return cached results without refetching.

Execution Table

Step	Action	Input URL	Cache Hit?	Data Fetched?	Cache Updated?	Output
1	Call fetchData('https://api.example.com/data')	https://api.example.com/data	No	Yes	Yes	{ data: ... }
2	Call fetchData('https://api.example.com/data') again	https://api.example.com/data	Yes	No	No	{ data: ... }
3	Call fetchData('https://api.example.com/other')	https://api.example.com/other	No	Yes	Yes	{ otherData: ... }
4	Call fetchData('https://api.example.com/data') again	https://api.example.com/data	Yes	No	No	{ data: ... }

💡 Requests stop fetching new data when cache hits occur for the same URL.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
cache	{}	{ 'https://api.example.com/data': { data: ... } }	{ 'https://api.example.com/data': { data: ... } }	{ 'https://api.example.com/data': { data: ... }, 'https://api.example.com/other': { otherData: ... } }	{ 'https://api.example.com/data': { data: ... }, 'https://api.example.com/other': { otherData: ... } }

Key Moments - 3 Insights

Why does the second call to fetchData with the same URL not fetch data again?

Because the cache already has the data for that URL from step 1, so it returns cached data without fetching again, as shown in execution_table row 2.

What happens when fetchData is called with a new URL?

The function fetches fresh data and updates the cache with the new URL and data, as seen in execution_table row 3.

Does the cache ever clear automatically in this example?

No, the cache keeps stored data indefinitely in this example until the app restarts or cache is manually cleared.

Visual Quiz - 3 Questions

Look at the execution_table, what is the cache state after step 3?

A Contains data for 'https://api.example.com/data' only

B Contains data for both 'https://api.example.com/data' and 'https://api.example.com/other'

C Contains data for 'https://api.example.com/other' only

D Cache is empty

💡 Hint

Check the cache variable_tracker after step 3 showing both URLs stored

At which step does fetchData first avoid fetching data due to cache hit?

A Step 2

B Step 1

C Step 3

D Step 4

💡 Hint

Look at execution_table column 'Cache Hit?' to find first 'Yes'

If we call fetchData('https://api.example.com/new') after step 4, what happens?

A Cache hit, returns cached data

B Returns undefined

C Fetches new data and updates cache

D Throws an error

💡 Hint

New URL not in cache, so fetchData fetches and caches new data

Concept Snapshot

Request memoization caches results of data fetching.
Use cache wrappers like React's cache() to store results.
Repeated calls with same input return cached data instantly.
New inputs trigger fresh fetch and cache update.
Improves performance by avoiding duplicate network calls.

Full Transcript

Request memoization in Next.js means saving the results of data fetching so that if the same request happens again, the app can reuse the saved data instead of fetching it again. This is done by wrapping the fetch function with a cache helper. When a request comes in, the app checks if the data for that request is already in cache. If yes, it returns the cached data immediately. If no, it fetches fresh data, saves it in cache, then returns it. This saves time and network resources. The example code shows how to memoize a fetch function using React's cache. The execution table traces calls to this function with different URLs, showing when data is fetched or returned from cache. The variable tracker shows how the cache object grows as new URLs are fetched. Key moments clarify why repeated calls with the same URL do not fetch again and what happens with new URLs. The quiz tests understanding of cache state and behavior. Overall, request memoization helps Next.js apps be faster and more efficient by reusing data when possible.