Next.js 15 App Router Caching(Part 1) - Request Memoization

Learn how to use fetch properly in single rendering in Next.js 15 App router using request memoization. Alternative to redux in Server Components

Published
Updated

Next.js 15 App Router offers several layers of caching:

  1. Request Memoization(current post)
  2. Data Cache
  3. Full Route Cache
  4. Router Cache
  5. React Cache

Let's dive into the first : Request Memoization

What Is Request Memoization?

In the Next.js App Router, the fetch() function is extended with automatic, in-memory caching on the server. This means that if you call fetch() multiple times with the same URL and options within a single server-side render, the request will only be made once — the result will be memoized.

How it works?

Pseudo tsx 
async function ServerComponent1() {
  const data1 = await fetch('https://example.com/api/data'); // executes
  const data2 = await fetch('https://example.com/api/data'); // cached result
  return null;
}

async function ServerComponent2() {
  const data = await fetch('https://example.com/api/data'); // cached result
  return null;
}

async function ServerComponentsWrapper(){
  return (
    <>
      <ServerComponent1/>
      <ServerComponent2/>
    </>
  )
}

This works automatically in both SSR (Server-Side Rendering), SSG (Static Site Generation) and ISG (Incremental Static Generation):

  • ✅ SSR: During a single request, identical fetch calls return a cached result — only one actual request is made per page render.
  • ✅ SSG: During the build process, the same optimization applies — fetches are cached per page, and only one execution happens per unique call.
  • ✅ ISG: During the first render after the cache has expired, the page is regenerated — identical fetches within that render are also cached internally by Next.js.

Visual Presentation

Request memization fetch calls
Deduplicated fetch requests schema

Images are taken from nextjs documentation.

Key Points

  • Caching uses in-memory storage (RAM) on the server.
  • You can't turn off this caching behavior.
  • Works as a replacement for global state tools (like Redux or Zustand) in Server Components.
  • Request memoization is a feature added in React 18 with Server Components.
  • Doesn't work in route handlers because they're not part of the React component tree.
  • Only works for GET requests.
  • If fetch isn’t directly accessible, you can wrap the third-party function that uses fetch with React’s cache() to enable memoization.

Why It Matters

Memoization helps reduce unnecessary network requests, speeding up response times and improving performance — especially for server-rendered pages. It’s particularly useful when you have multiple components depending on the same data source.

Learn More