Request Memoization in Next.js: What It Is and How It Works

In Next.js, request memoization means saving the result of a data fetch during a single server request so that repeated calls return the saved result instead of running again. This improves performance by avoiding duplicate work within the same request lifecycle.

How It Works

Request memoization in Next.js works like remembering your answer during a conversation so you don't repeat yourself. When your server code fetches data, it stores the result temporarily for that request. If the same data is needed again during that request, Next.js returns the stored result instead of fetching it again.

This is helpful because server requests can involve multiple components or functions asking for the same data. Memoization avoids repeating expensive operations like database queries or API calls, making the server response faster and more efficient.

Example

This example shows a simple Next.js server component that fetches user data with request memoization. The data fetch runs only once per request, even if called multiple times.

tsx

import { cache } from 'react';

// Simulate a slow data fetch
async function fetchUser() {
  console.log('Fetching user data...');
  return new Promise(resolve => setTimeout(() => resolve({ id: 1, name: 'Alice' }), 1000));
}

// Memoize the fetchUser function for the request
const memoizedFetchUser = cache(fetchUser);

export default async function UserProfile() {
  const user1 = await memoizedFetchUser();
  const user2 = await memoizedFetchUser();

  return (
    <>
      <p>User 1: {user1.name}</p>
      <p>User 2: {user2.name}</p>
    </>
  );
}

Output

Fetching user data...

User 1: Alice
User 2: Alice

When to Use

Use request memoization in Next.js when your server-side code fetches the same data multiple times during one request. This often happens in complex pages with many components needing shared data.

It is especially useful for expensive operations like database queries, API calls, or heavy computations. Memoization reduces server load and speeds up response times by avoiding repeated work.

However, memoization only lasts for the current request. For caching across requests, use other caching strategies like CDN or database caching.

Key Points

• Request memoization saves data fetch results during a single server request.
• It prevents repeated expensive operations within the same request.
• Next.js provides utilities like cache to enable memoization easily.
• Memoization only lasts for one request; it does not cache across requests.
• Use it to improve performance in server components or API routes.

Key Takeaways

Request memoization stores data fetch results to avoid repeating work in one server request.

Use Next.js's cache utility to memoize async functions easily.

Memoization improves performance but only lasts for the current request.

Ideal for expensive data fetching used multiple times in server components.

For cross-request caching, use other caching methods like CDN or database caches.