Suggest an editImprove this articleRefine the answer for “What is caching in Next.js?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Caching in Next.js** is a mechanism that lets you **save the results of computations and requests** and reuse them, so pages load faster and the server does less redundant work. **Key point:** the key tool is `fetch`, `no-store` disables the cache, and `revalidate` enables automatic refresh.Shown above the full answer for quick recall.Answer (EN)Image**Caching in Next.js** is a mechanism that lets you **save the results of computations and requests** and reuse them, so pages load faster and the server does less redundant work. In other words: Next.js tries **not to recompute or re-request the same thing every time**, if the data can be taken from the cache. --- ## What exactly gets cached Several levels get cached in Next.js: ### 1. Data cache (`fetch`) - the result of server-side `fetch` requests - used in Server Components, SSG, ISR - **data** is cached, not HTML --- ### 2. Render cache (HTML / RSC) - the result of rendering a page or layout - allows a ready result to be served quickly - especially important for static pages --- ### 3. Route cache - reuse of already generated pages - reduces load during navigation --- ## Where caching happens - caching happens **on the server** - client requests (`useEffect`, SWR in the browser) do not go into this cache - the browser cache and the Next.js cache are different things --- ## How Next.js decides whether to cache The main control happens through server-side `fetch`. ### Default behavior ```js await fetch(url) ``` - the request is cached - the result is reused - suited for static data --- ### Always-fresh data ```js await fetch(url, { cache: "no-store" }) ``` - caching is disabled - the request runs every time - similar to SSR --- ### Cache with refresh ```js await fetch(url, { next: { revalidate: 60 } }) ``` - data is taken from the cache - refreshed in the background once every 60 seconds - this is the basis of ISR --- ## Why all of this matters Caching gives you: - a faster response for the user - fewer requests to the API - less load on the server - predictable page behavior - a good balance between speed and data freshness --- ## A typical selection logic - data **almost never changes** -> cache it - data **sometimes updates** -> revalidate - data **must always be fresh** -> no-store - personal data -> more often without a cache --- ## Short summary - caching is the reuse of data and rendering - in Next.js the cache is mostly server-side - the key tool is `fetch` - `no-store` disables the cache - `revalidate` enables automatic refresh - the cache speeds up the app and reduces loadFor the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.