Request Memoization

Deduplicating fetch calls during a single render.

Next.js6 min readConcept 22 of 65

The end of prop drilling

In traditional React, if your Header, Sidebar, and Main content all needed the same user data, you had to fetch it at the top of the tree and pass it down via props or Context.

With Request Memoization in the App Router, you can simply call fetch('/api/user') directly inside the Header, the Sidebar, and the Main content. Next.js will automatically deduplicate these identical requests.

How it works

When the first component calls fetch, Next.js checks a short-lived memory cache. Since it's empty, the request goes to the external database.

The database responds, and Next.js saves the result in the memory cache. When the second and third components call the exact same fetch, Next.js intercepts them and instantly returns the cached data, completely bypassing the network.

The lifespan of the cache

This is the most critical detail to memorize: Request Memoization only lasts for the duration of a *single* server render pass.

As soon as the page finishes rendering and the HTML is sent to the client, this cache is completely destroyed. It does not persist across different users, and it does not persist across multiple page reloads.

The Deduplication Engine

Click 'Render Page' to simulate a Next.js server render. Watch three isolated components request the exact same data. The first request will hit the database, but the remaining two will instantly resolve from the glowing React Memory Cache.

Server Render Pass

Headerfetch('/api/user')
Sidebarfetch('/api/user')
Main Contentfetch('/api/user')
React Memory CacheEMPTY
External DBLatency: 120ms

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1How long does Request Memoization cache your data?
  2. 2You are using Prisma to query your database in two different Server Components. How do you ensure the database is only hit once?

Remember this

  • You can confidently call the same fetch in multiple components without prop-drilling.
  • The cache is destroyed immediately after the page finishes rendering.
  • Only GET requests using the native fetch API are automatically memoized.
  • Use React.cache() to memoize database ORMs (like Prisma, Drizzle) or Axios.

Done with this concept?

Mark it complete to track your progress. No login needed.