Suggest an editImprove this articleRefine the answer for “What caching levels exist?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)In Next.js, caching is **multi-layered** - not just the result of a request is cached, but different stages of rendering too. **Key point:** the higher the level, the faster the response, but the harder it is to keep data fresh.Shown above the full answer for quick recall.Answer (EN)ImageIn 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**.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.