App Router data fetching — how does Next.js cache `fetch()` by default?

Deep dive

In the App Router, `fetch()` used in **Server Components** participates in Next.js caching:

• **Request memoization**: identical fetches during a single render are deduped.
• **Data cache** (when allowed): results can be reused across requests, enabling SSG/ISR-like behavior.

By default, Next caches GET-like requests when it can (similar to `force-cache`). You can opt out or control freshness using revalidation.

Controls

Disable caching (SSR-like):

await fetch(url, { cache: 'no-store' })

Revalidate after N seconds (ISR-like):

await fetch(url, { next: { revalidate: 60 } })

What can force dynamism

Reading request-specific values like `cookies()` or `headers()` can make a route dynamic, which affects caching.

Common pitfalls

• Assuming client-side `fetch` uses the same cache (it doesn’t; that’s browser caching).
• Forgetting that headers/credentials affect the cache key.