Suggest an editImprove this articleRefine the answer for “How do Server Components cache data?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Server Components** in Next.js **cache data automatically**, mostly through a smart `fetch`. **Key point:** the cache runs on the server and is managed by Next.js itself - by default requests are cached, `cache: "no-store"` disables caching, and `revalidate` gives you a cache with automatic refresh.Shown above the full answer for quick recall.Answer (EN)ImageServer Components in Next.js **cache data automatically**, mostly through a smart `fetch`. The cache runs **on the server** and is managed by Next.js itself - you don't need to write separate logic for it. --- ## The basic idea of caching When a Server Component makes a `fetch`, Next.js: 1. checks whether **a result for this request already exists in the cache** 2. if it does - **returns it** 3. if not - makes the request, saves the result, and reuses it afterward By default, requests **are cached**. --- ## Caching through `fetch` ### Default behavior ```js const res = await fetch("https://api.example.com/posts") ``` By default this is: - a **cacheable request** - data is saved - reused on subsequent renders - especially effective for SSG and ISR This differs from a regular `fetch` in the browser - here it is managed by the framework. --- ## Managing the cache ### 1. Disable caching entirely If data must always be **fresh**: ```js await fetch(url, { cache: "no-store" }) ``` What this means: - the request **is not cached** - it runs on every render - the behavior resembles SSR --- ### 2. Cache with refresh (revalidation) You can say: "cache it, but refresh it once every N seconds" ```js await fetch(url, { next: { revalidate: 60 } }) ``` Behavior: - data is taken from the cache - once every 60 seconds Next.js refreshes it in the background - users don't wait for the refresh This is **ISR**, but at the level of a specific request. --- ### 3. Cache shared across components If: - several Server Components make **the same fetch** - with the same parameters Next.js: - executes the request **once** - reuses the result This reduces load on the API and speeds up rendering. --- ## Cache and the page's render type Caching is closely tied to **how the page renders**: - **SSG** -> data is cached forever (or until revalidate) - **ISR** -> cache + periodic refresh - **SSR (**`no-store`**)** -> no cache - **Client fetching** -> the server cache does not participate --- ## What exactly gets cached Cached: - the `fetch` result - the binding to the URL and options - data, not HTML Not cached: - `useEffect` - client-side requests - requests with `no-store` --- ## Why this is convenient - no need to hand-write Redis / memory cache - fewer requests to the API - fast repeated renders - predictable, declarative behavior You just describe **how fresh the data needs to be**, and Next.js does the rest. --- ## Short summary - Server Components cache data through **server-side** `fetch` - by default `fetch` **is cached** - `cache: "no-store"` - no cache, always fresh data - `revalidate` - a cache with automatic refresh - identical requests are reused - the cache works **at the data level**, not the UI Next.js takes on most of the caching logic - you just have to pick the strategy you need.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.