The Data Cache

Persistent, cross-user HTTP caching via fetch.

Next.js6 min readConcept 23 of 65

The persistent cache

Unlike Request Memoization, which is destroyed the moment the page finishes rendering, the Data Cache is persistent. It survives across multiple server requests, and its cached data is shared among all users visiting your site.

Next.js achieves this by extending the native fetch API, allowing you to configure caching behavior on a per-request basis.

Granular control

Historically, caching was done at the page level. If a page was cached, everything on it was cached.

The Data Cache allows granular, component-level caching. Your Sidebar can fetch cached navigational links, while your Header simultaneously fetches real-time, completely uncached shopping cart data on the exact same page.

The three core configurations

You control the Data Cache using the options object in your fetch calls:

{ cache: 'force-cache' }: The request is cached indefinitely until manually invalidated.

{ cache: 'no-store' }: The request completely bypasses the cache and hits the origin server every time.

{ next: { revalidate: 60 } }: The request is cached, but automatically invalidated after 60 seconds.

The Fetch Semantics

Review the mapping below to understand exactly how the fetch API options dictate whether a request hits the Data Cache or the Origin Server.

Indefinite Cache
fetch(url, { cache: 'force-cache'
})
CACHE HITReturns stored response instantly
Bypassed
Uncached (Dynamic)
fetch(url, { cache: 'no-store'
})
CACHE SKIP
DB HITFetches fresh data every time
Time-based
fetch(url, { next: { revalidate: 60 }
})
CACHE CHECKReturns if fresh (< 60s)
BACKGROUND HITRefetches & updates cache

Check yourself

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

  1. 1What is the primary difference between Request Memoization and the Data Cache?
  2. 2In Next.js 15, what is the default caching behavior for a fetch request inside a dynamic route?

Remember this

  • The Data Cache persists across multiple server requests and is shared among all users.
  • Next.js 15 defaults to no-store (uncached) for dynamic requests.
  • Use force-cache to cache indefinitely.
  • Use next: { revalidate: N } for Time-based Revalidation.
  • Calling cookies() or headers() will dynamically opt the route out of the Data Cache.

Done with this concept?

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