What caching options does `fetch` have?

In 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

---

#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.