Next.js extends the native 'fetch' API to include specific caching and revalidation options.
Interactive Simulation Engine
fetch() Option Lab
Granular Cache Control
fetch('/api/data', {
cache: 'force-cache'
})
Server Component
Next.js
Cache Resolver
Cache Resolver
Static Hit
BehaviorNext.js will look for a cached response. If not found, it fetches and stores it forever.
Executable Code Workbench
page.tsx
Live Code Editor1// 1. Force Cache (Static)
2fetch('url', { cache: 'force-cache' })
3
4// 2. No Cache (Dynamic)
5fetch('url', { cache: 'no-store' })
6
7// 3. Revalidate (ISR)
8fetch('url', { next: { revalidate: 3600 } })Mental Model
Instructions for the 'fetcher'. You can tell it to 'always remember', 'never remember', or 'remember for 10 minutes'.
Why This Exists
To give developers granular control over data freshness on a per-request basis.
Critical Note
"Developers often confuse this pattern with traditional client React. Use the Live Code Workbench above to simulate execution."