Suggest an editImprove this articleRefine the answer for “What caching levels are there in Next.js?”. 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 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. **Key point:** Next.js doesn't have one "cache" - there are several levels, each with its own role.Shown above the full answer for quick recall.Answer (EN)ImageIn 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".For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.