What caching levels are there in Next.js?

In Next.js, caching is set up in multiple layers - data and the render result can be stored at different points along the path from the server to the user. This gives flexibility: you can speed up the application without sacrificing freshness where it matters.

Below are all the main caching levels, from "internal" to more external.

---

#1. fetch cache (data level)

This is the most basic and most important level.

#What gets cached

• the results of fetch requests
• responses from APIs, a CMS, external services

#Where it works

• on the Next.js server
• in Server Components
• in route handlers

#How it's controlled

• cache: 'force-cache'
• cache: 'no-store'
• next: { revalidate: N }

#Why it's needed

• so identical requests aren't made over and over
• so different pages can reuse the same data

The same fetch can serve many pages and users.

---

#2. Render cache (Full Route Cache)

This is a cache of the already-assembled HTML / RSC tree for a route.

#What gets cached

• the result of rendering the page
• including markup and data

#When it's used

• static pages
• pages with ISR
• Server Components without dynamic behavior

#What it provides

• the server doesn't rebuild the page
• the HTML is served instantly

Important:

• if the data inside the page is cached, the page itself can be cached too
• if there's a no-store inside, the render cache is disabled

---

#3. ISR cache (page lifetime)

This is a layer built on top of static generation.

#What gets cached

• the static version of the page
• with a refresh timer

#How it works

• the page is considered "fresh" for N seconds
• then it's refreshed in the background
• users don't wait for a rebuild

#Why it's needed

• to combine the speed of static pages
• with refreshable data

This level matters especially for:

• blogs
• catalogs
• content sites

---

#4. React Server Components cache (RSC Cache)

This is a cache at the level of server components.

#What gets cached

• the result of running Server Components
• the serialized RSC tree

#What it provides

• re-rendering the page may not need to re-run the component
• especially useful for navigation within the application

This level is closely tied to:

• the fetch cache
• the route cache

---

#5. CDN / Edge cache (external level)

This is already outside Next.js, but it's actively used.

#What gets cached

• HTML
• JSON
• static files

#Where

• on a CDN (Vercel, Cloudflare, etc.)
• geographically closer to the user

#What it provides

• minimal latency
• scalability
• reduced load on the server

Next.js can:

• automatically send the right cache headers
• so the CDN understands what and how to cache

---

#6. Client cache (browser and libraries)

This is the outermost level.

#What belongs here

• the browser's HTTP cache
• the SWR / React Query cache
• in-memory state

#Specifics

• it's short-lived
• it's individual per user
• it's cleared on reload

Used mainly for:

• interactive data
• updates without a page reload

---

#How it all fits together

The chain usually looks like this:

API → fetch cache → RSC / route cache → CDN → browser

And you can control:

• each fetch
• the page's behavior
• the refresh time
• how dynamic the data is

---

#The key thing to understand

• Next.js doesn't have one "cache"
• There are several levels, each with its own role
• A mistake at one level can "break" the whole effect
• But with the right setup, the application becomes:
  • fast
  • scalable
  • predictable

All these levels are part of Next.js's architecture, not separate "features".