What caching levels exist?

In Next.js, caching is set up in multiple layers - not just the result of a request is cached, but different stages of rendering too. This lets you significantly speed up the application and reduce the number of repeated computations.

Below are the main caching levels, from "low" to "high".

---

#1. Data Cache

This is the most basic level.

#What gets cached:

• the result of server-side fetch requests
• data from external APIs or backend services

#Where it's used:

• Server Components
• SSG
• ISR

#How it's controlled:

• by default, fetch is cached
• cache: "no-store" - no caching
• next: { revalidate } - a cache with automatic revalidation

This is a cache of data, not HTML.

---

#2. React Server Components cache (RSC cache)

#What gets cached:

• the result of running Server Components
• data + UI structure in RSC format

#Why it's needed:

• to reuse the result of server components
• to speed up repeated renders
• to avoid repeated fetch calls

It works on top of the Data Cache and is closely tied to it.

---

#3. Render cache (Full Route / HTML Cache)

#What gets cached:

• the fully rendered page (HTML)
• layout + page

#When it's used:

• with static generation (SSG)
• with ISR

#Specifics:

• the user gets already-ready HTML
• minimal load on the server

This is the "heaviest", but the fastest level.

---

#4. Router Cache

#What gets cached:

• already-loaded page segments
• the results of navigating between routes

#Where it works:

• on the client (App Router)
• during transitions without a page reload

#What it provides:

• instant transitions
• fewer network requests

---

#5. External cache (CDN / Edge)

This isn't directly part of Next.js, but it's often used alongside it.

#Technologies:

• CDN
• edge caching
• reverse proxy

#What gets cached:

• HTML
• JSON
• static files

It works on top of everything else.

---

#How it all connects

Simplified:

• Data Cache -> cache of data
• RSC Cache -> cache of server components
• HTML Cache -> cache of the whole page
• Router Cache -> cache of navigation
• CDN -> cache at the network level

The higher the level, the faster the response, but the harder it is to keep data fresh.

---

#Short summary

Next.js has several caching levels:

• the data cache (fetch)
• the Server Components cache
• the HTML / route cache
• the client-side navigation cache
• an external one (CDN)

They work together, letting you balance speed and data freshness.