Next.js ~Cache Systems~

The cache systems of Next.js(especially App Router) are made to allow you to optimize performance and minimize data transfer costs.

Eventhough those systems are strong, it matters to put four cache layers in order to avoid unexpected behavior (e.g. data not updating).

---

💡 Four cache layers in Next.js

In Next.js, there are three caches in server component and one cache in client component.

Cache Name	Storage Location	What Is Cached	Purpose / Feature	Lifetime (Timing)
① Request Memoization	Server	Return values of GET fetch requests.	Automatically combines multiple API calls with the same path and arguments into a single call to prevent duplicate fetches during one render pass.	Single request lifetime. Disappears completely after the page finishing rendering.
② Data Cache	Server	Data fetched from external APIs or databases.	Reduces the number of direct hits to your database or third-party APIs across multiple user requests.	Persistent indefinitely by default (survives redeploys). Can be revalidated via time-based rules or on-demand tags.
③ Full Route Cache	Server	Page's HTML and RSC Payload	Generates static pages at build time or during background revalidation to drastically improve initial page load speed.	Persistent until the next redeploy or until its underlying Data Cache is updated/invalidated.
④ Router Cache	Client	RSC Payload for navigated pages	Ensures pages switch instantly on the client side without layout shifts or delay when users click links or go back/forward.	Session-only. Clears completely upon hard reload, or after a specific period of inactivity (depends on dynamic/static route types).

---

⚙️ Details for each caches and how to control them.

① Request Memoization（prevent redundant API calls）

When render a single page, eventhough multiple components call the same fetch('/api/user') , React combines them into a singlr call automatically.

• Advantage: Need not to do props drilling

• Caution: This is only a fuction of React and is applied to fetch (GET). axios or query for DB are not eligible. If you want to combine them, you have to wrap them with cache() .

② Data Cache（Permanent Cache for data）

Server caches data fetched by API.

• Updating Cache: It is updated using the revalidatePath and revalidateTag methods introduced earlier, or by specifying a time interval (ISR) such as fetch(url, { next: { revalidate: 3600 } })

③ Full Route Cache（Staticization During Building）

Next.js caches the entire page as a static HTML when judged that the page doesn't have any dynamic data-such as cookies or search parameters.

• How to Disable: If you use imformation that is only known at the time of request-such as cookies() or headers()-in your code(Dynamic Function), this cache will be automaticlly bypassed, and the page will be rendered dynamically.

④ Router Cache（Speeding Up Browser Back Button Functionality, etc.）

Hold the imformation of the route temporarily on the browser.

• How to Disable: If you execute revalidatePath in the server action, Cache is cleared and the screen is rewriteen.

⚠️ 【IMPORTANT】A big change in Next.15

Previous versions of Next.js (such as v14) were based on the philosophy of “aggressively caching everything by default (opt-out approach),” which led to confusion among developers who found that “the data isn’t updating!”

Since old Next.js(v14 or so.) had a theory that "Cache everything strongly as default(Opt-out format)", this used to cause confusings that "Data isn't cached".

In Next.js 15, defalt has been changed to "Non-cache(Opt-in format)".

1. fetch isn't cached by default
   
   In classic Next.js, fetched data is cached automatically. However, From Next.js 15, requests run every rendering until you define { cache: 'force-cache'} .

2. Route Handlers of GET is no longer cached by default
   
   Mordan APIs in Route Handler such as /api/time request everytime.

3. Default actions of Router Cache in client has been cahnged
   
   If you navigate to other pages, data used to be stable in 30 seconds in browser. However, in Next.js15, data isn't cached by default and latast dat a is displayed on the screen.

---