Suggest an editImprove this articleRefine the answer for “What caching options does `fetch` have?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)In Next.js, `fetch` has several caching options: `cache: 'force-cache'` (default, data from the cache), `cache: 'no-store'` (caching fully disabled), and `next: { revalidate: N }` (the cache refreshes every N seconds - the basis of ISR). **Key point:** if `fetch` reads cookies or request headers, Next.js can automatically make it dynamic, even without explicit `no-store`.Shown above the full answer for quick recall.Answer (EN)ImageIn Next.js, `fetch` is not just the standard browser `fetch`, but an **extended version with server-side caching**. It has several modes that determine **whether to store data in the cache and how to refresh it**. --- ## 1. `cache: 'force-cache'` (default) This is the **default behavior** of `fetch` in Server Components. ### How it works - First request → data is loaded and put into the cache - All subsequent requests → data is taken from the cache - A new request to the API **is not made** until the cache is invalidated ### What this means in practice - The page behaves like a **static** one - Maximum speed - Minimal server load ### When to use - Public data - Content that rarely changes - Blogs, documentation, reference material --- ## 2. `cache: 'no-store'` This mode **completely disables caching**. ### How it works - Every request → a fresh fetch for data - Nothing is stored - Nothing is reused ### What this means in practice - Data is always up to date - The page becomes dynamic - The server is loaded more heavily ### When to use - Personal data - Authorization - User profile - Data that depends on cookies or headers --- ## 3. `next: { revalidate: N }` This is a mode of **controlled caching** - the basis of ISR. ### How it works - Data is cached - The cache is considered valid for `N` seconds - After that, Next.js refreshes the data Important: - the user **does not wait for the update** - the update happens in the background ### What this means in practice - Almost always fresh data - Without constant requests - A good balance of speed and freshness ### When to use - Catalogs - News - Feeds - Frequently updated public content --- ## 4. Combining with headers and cookies If `fetch`: - uses cookies - or reads request headers Next.js **can automatically make it dynamic**, even if you did not explicitly specify `no-store`. This protects against: - accidentally caching personal data - information leaks between users --- ## Short table | Option | Cache | Refresh | Behavior | |---|---|---|---| | `force-cache` | Yes | No | Static | | `no-store` | No | Always | Dynamic | | `revalidate: N` | Yes | After N sec | ISR | --- ## The main thing to remember - `fetch` in Server Components is **always server-side** - Caching is enabled by default - Cache behavior is a **deliberate choice**, not magic - Choosing the wrong mode means either stale data or unnecessary load All these mechanisms are a key part of working with data in Next.js.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.