Request memoization in NextJS

Introduction

Request memoization helps save time and resources by remembering data from previous identical function calls within the same request. It avoids asking the server for the same information multiple times.

When fetching user profile data that doesn't change often.

When loading a list of products that updates only once a day.

When showing cached weather information for the current location.

When multiple components on the same page fetch the same data.

Syntax

NextJS

import { cache } from 'react';

const fetchUserData = cache(async (userId) => {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  if (!response.ok) {
    throw new Error('Failed to fetch user data');
  }
  return response.json();
});

The cache function wraps an async function to remember its results.

When called again with the same arguments, it returns the saved result instantly.

Examples

This memoizes a fetch with no input parameters. It will only fetch once and reuse the data.

NextJS

import { cache } from 'react';

// Example: Memoize a fetch with no parameters
const fetchSiteSettings = cache(async () => {
  const response = await fetch('https://api.example.com/settings');
  return response.json();
});

Memoizes fetch calls for different post IDs separately.

NextJS

import { cache } from 'react';

// Example: Memoize fetch with parameters
const fetchPost = cache(async (postId) => {
  const response = await fetch(`https://api.example.com/posts/${postId}`);
  return response.json();
});

Shows how memoization works with multiple inputs.

NextJS

import { cache } from 'react';

// Edge case: Calling with different arguments
await fetchPost(1); // Fetches and caches post 1
await fetchPost(2); // Fetches and caches post 2
await fetchPost(1); // Returns cached post 1 instantly

Sample Program

This program fetches user data for user 1 twice and user 2 once. The second fetch for user 1 uses cached data, so it does not print the fetching message again.

NextJS

import { cache } from 'react';

// Memoized fetch function
const fetchUserData = cache(async (userId) => {
  console.log(`Fetching data for user ${userId}`);
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  if (!response.ok) {
    throw new Error('Failed to fetch user data');
  }
  return response.json();
});

async function runDemo() {
  console.log('First call for user 1:');
  const user1First = await fetchUserData(1);
  console.log(user1First.name);

  console.log('Second call for user 1 (should be cached):');
  const user1Second = await fetchUserData(1);
  console.log(user1Second.name);

  console.log('Call for user 2:');
  const user2 = await fetchUserData(2);
  console.log(user2.name);
}

runDemo();

Important Notes

Time complexity: The first call takes normal fetch time; repeated calls with the same arguments are instant.

Space complexity: Cached results use memory proportional to the number of unique argument sets.

Common mistake: Forgetting that memoization caches results only for the exact same arguments.

Use memoization when data changes rarely and repeated requests happen with the same parameters.

Summary

Request memoization saves repeated fetches by remembering previous results.

Use Next.js cache to wrap async fetch functions easily.

It improves performance and reduces server load for repeated requests.

Practice

1. What is the main purpose of request memoization in Next.js?

easy

A. To increase the number of server requests

B. To save repeated fetches by remembering previous results

C. To disable caching for all requests

D. To make fetch requests slower

Solution

1. Step 1: Understand request memoization concept

   Request memoization stores the results of previous fetches to avoid repeating the same network calls.

2. Step 2: Identify the effect on performance

   By remembering previous results, it reduces server load and speeds up response times.

3. Final Answer:

   To save repeated fetches by remembering previous results -> Option B

4. Quick Check:

   Request memoization = Save repeated fetches [OK]

Hint: Memoization means remembering past results to avoid repeats [OK]

Common Mistakes:

• Thinking memoization increases server requests
• Confusing memoization with disabling cache
• Assuming memoization slows down fetches

2. Which of the following is the correct way to memoize a fetch function in Next.js using the built-in cache?

easy

A. const cachedFetch = fetch.cache('/api/data')

B. const cachedFetch = async cache(() => fetch('/api/data'))

C. const cachedFetch = cache(async () => await fetch('/api/data'))

D. const cachedFetch = cache.fetch('/api/data')

Solution

1. Step 1: Recall Next.js cache usage

   Next.js provides a cache function that wraps async functions to memoize their results.

2. Step 2: Check correct syntax

   The correct syntax is cache(async () => await fetch(...)), which matches const cachedFetch = cache(async () => await fetch('/api/data')).

3. Final Answer:

   const cachedFetch = cache(async () => await fetch('/api/data')) -> Option C

4. Quick Check:

   cache wraps async fetch function = const cachedFetch = cache(async () => await fetch('/api/data')) [OK]

Hint: Use cache() to wrap async fetch functions correctly [OK]

Common Mistakes:

• Placing cache inside async incorrectly
• Using non-existent fetch.cache method
• Calling cache.fetch which does not exist

3. Given this code snippet in Next.js, what will be logged on the second call to getData()?

import { cache } from 'react';

const getData = cache(async () => {
  console.log('Fetching data');
  return await fetch('/api/data').then(res => res.json());
});

await getData();
await getData();

medium

A. Fetching data

B. Fetching data
Fetching data

C. No output

D. Error: cache is not a function

Solution

1. Step 1: Understand cache behavior on repeated calls

   The cache function memoizes the async function result, so the fetch and console.log run only once.

2. Step 2: Analyze the second call effect

   On the second call, the cached result is returned without running the function body again, so no console.log output.

3. Final Answer:

   Fetching data -> Option A

4. Quick Check:

   cache memoizes, so console.log runs once [OK]

Hint: cache runs function once, returns cached result later [OK]

Common Mistakes:

• Expecting console.log to run twice
• Thinking cache disables function execution
• Confusing cache with normal fetch calls

4. Identify the error in this Next.js memoized fetch code:

import { cache } from 'react';

const getData = async cache(() => {
  return await fetch('/api/data').then(res => res.json());
});

medium

A. TypeError: cache is not a function

B. RuntimeError: fetch is not defined

C. No error, code works fine

D. SyntaxError: 'cache' must wrap the async function, not be called inside it

Solution

1. Step 1: Check cache usage syntax

   The cache function must wrap the async function, not be called inside the async declaration.

2. Step 2: Identify the syntax mistake

   Writing async cache(() => ...) is invalid syntax; it should be cache(async () => ...).

3. Final Answer:

   SyntaxError: 'cache' must wrap the async function, not be called inside it -> Option D

4. Quick Check:

   cache wraps async function syntax = SyntaxError: 'cache' must wrap the async function, not be called inside it [OK]

Hint: cache wraps async function, not inside async declaration [OK]

Common Mistakes:

• Placing async before cache call incorrectly
• Assuming fetch is undefined without context
• Thinking cache is not imported

5. You want to memoize a fetch function in Next.js that depends on a dynamic URL parameter. Which approach correctly memoizes requests per unique URL?

hard

A. Use cache with a function that takes the URL as argument and memoizes internally

B. Use a single cached function without parameters for all URLs

C. Memoize only the first URL and ignore others

D. Do not use cache; fetch every time for dynamic URLs

Solution

1. Step 1: Understand memoization with parameters

   To memoize requests per unique URL, the cache must consider the URL argument to store separate results.

2. Step 2: Use cache with parameterized function

   Wrapping a function that takes URL as input with cache memoizes each unique URL separately.

3. Final Answer:

   Use cache with a function that takes the URL as argument and memoizes internally -> Option A

4. Quick Check:

   cache with parameters memoizes per input [OK]

Hint: Memoize functions with parameters to cache per input [OK]

Common Mistakes:

• Using single cache for all URLs causing wrong data
• Ignoring memoization for dynamic inputs
• Assuming cache disables dynamic fetching