[Next.js 15] - Part 11. Understanding Data Cache and Request Memoization

1. Default Caching with fetch in Next.js

When you use the fetch function in Next.js on the server, data caching is enabled by default. The response from the fetch call is stored in the data cache, which is persistent and can be reused for subsequent requests.

Additionally, Next.js uses memoization, a technique that temporarily caches the result of a fetch call (with the same URL and options) during a single component render.

2. Difference Between Memoization and Data Cache

Memoization:

• Stores the result of a fetch call in memory (RAM).

• Only lasts for the duration of the current React component tree render.

• Purpose: Prevent duplicate fetch calls within the same render process.

Data Cache:

• Stores the result of a fetch call in persistent storage on the server.

• Can be reused across multiple HTTP requests.

• Purpose: Reduce the time spent fetching data from the source.

3. How Memoization and Data Cache Work

Here’s an example of how the process works:

Starting with a fetch call:

When you call fetch with default options, caching is automatically enabled.

Checking Memoization:

• If the fetch call is already memoized (same URL and options), Next.js returns the cached result from memory.

• If not, it moves to check the data cache.

Checking Data Cache:

• If the response is found in the data cache, Next.js returns the cached data.

• If not, the data is fetched from the source (specified URL), and then:

  • Stored in the data cache for future use.

  • Memoized for use during the current render.

4. Customizing Cache Behavior

• Setting cache duration:
  Use revalidation to specify how long cached data remains valid, e.g.,
  "Keep the data in cache for 1 hour."

• On-demand revalidation:
  If data changes (e.g., a blog post is updated), you can explicitly mark the cached data as stale and trigger a refresh.

• Disabling cache:
  You can opt out of caching for specific requests or entire route segments if needed.

5. Diagram Explanation of the Workflow

1. A fetch call is made.

2. Check:

   • If memoized, return the memoized result.

   • If not, check the data cache.

3. If the data is in the data cache, return the cached result.

4. If not, fetch the data from the source:

   • Store the result in the data cache.

   • Memoize the result for the current render.

6. Key Notes

• Memoization is only effective within a single render cycle.

• Data Cache is persistent and can be reused across requests.

• Understanding both helps you optimize performance and reduce redundant fetch calls.