Fetch and Caching
The extended fetch API controls whether a request is cached or re-run on every request.
Syntax
fetch(url, { next: { revalidate: 60 } })Next.js extends the native fetch with caching options. By default in Next 15, fetch requests are not cached (they run each time), but you can opt into caching or timed revalidation with the cache and next options.
The main options
cache: 'force-cache'— cache the result indefinitely (static).cache: 'no-store'— never cache; fetch fresh every time (dynamic).next: { revalidate: 60 }— cache, but refresh at most every 60 seconds.
Example
// Cache this response and refresh it at most once per hour
const res = await fetch('https://api.example.com/prices', {
next: { revalidate: 3600 },
});
// Always fetch fresh (dynamic)
const live = await fetch('https://api.example.com/live', {
cache: 'no-store',
});When to use it
- A blog index caches post list fetches so repeat visits are served from memory without hitting the CMS API.
- A stock ticker page uses cache: 'no-store' to ensure every request returns the latest live price.
- A product page uses next.revalidate to serve a cached response but refresh it every 60 seconds.
More examples
Default cached fetch
Without options, fetch responses are cached by Next.js and reused across requests for that build.
// Cached indefinitely (default in Next.js 13-14)
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();Opt out of cache per request
cache: 'no-store' bypasses the data cache so the fetch runs fresh on every incoming request.
// Always fresh — runs on every request
const res = await fetch('https://api.example.com/stock-price', {
cache: 'no-store',
});
const price = await res.json();Time-based revalidation
next.revalidate seconds tells Next.js to serve the cached response but re-fetch in the background after that interval.
// Revalidate at most every 60 seconds
const res = await fetch('https://api.example.com/products', {
next: { revalidate: 60 },
});
const products = await res.json();
Discussion