Next.js ~Cache Systems~

In the realm of web development, Next.js is a popular framework that enables developers to create high-performing applications. One of the key features of Next.js is its cache systems, which can be leveraged to optimize performance and reduce data transfer costs. However, it is essential to understand the functioning and management of these caches to avoid unexpected behavior.

Next.js employs four distinct cache layers, each serving a specific purpose. The first cache, named Request Memoization, operates on the server side and is responsible for combining multiple GET fetch requests into a single call during a single render pass. This mechanism prevents redundant API calls and enhances performance. However, it is important to note that this cache does not apply to other types of requests, such as those made using axios or database queries. To combine these, developers must wrap them in the cache() function.

The second cache, termed Data Cache, is also server-side but focuses on caching data fetched from external APIs or databases. This cache helps minimize the number of direct hits to databases or third-party APIs across multiple user requests, thereby reducing data transfer costs. Data within this cache is persistent indefinitely by default, surviving redeploys. Developers can control its behavior using time-based revalidation rules or on-demand tags.

The third cache, Full Route Cache, is a server-side cache that generates static HTML pages during build time or background revalidation. This cache significantly improves initial page load speed by serving pre-rendered pages to users. The cache persists until the next redeploy or until its underlying Data Cache is updated or invalidated.

The fourth and final cache, Router Cache, operates on the client side and holds information temporarily during the browser's back button functionality and similar features. This cache ensures that pages switch instantly on the client side without layout shifts or delays when users engage in navigation actions. The Router Cache is session-only and clears completely upon hard reload or after a specific period of inactivity, depending on the route type.

It is crucial to understand that with the introduction of Next.js 15, the default caching behavior has changed. Previously, Next.js relied on an "opt-out" approach, where aggressive caching was the default behavior, which could lead to confusion if data did not update as expected. In contrast, Next.js 15 defaults to a "non-cache" (opt-in) approach, where requests run every rendering until explicitly instructed otherwise.

Route Handlers of GET, for instance, are no longer cached by default, and the default actions of Router Cache in client-side applications have also been altered. Developers must now explicitly define { cache: 'force-cache' } to enable caching for fetch requests.