fetch() with Cache Options in Next.js
Use force-cache, no-store, and revalidate options on fetch to control caching behaviour.
Extended fetch in Next.js
Next.js extends the native fetch() API with a next option for caching and revalidation control. This only works in Server Components and route handlers.
force-cache (Default)
By default, fetch() in Next.js uses force-cache — it caches the response indefinitely and reuses it for all requests until explicitly revalidated.
// Cached forever (build-time static)
const res = await fetch('https://api.example.com/config', {
cache: 'force-cache',
});
const config = await res.json();All lessons in this course
- fetch() with Cache Options in Next.js
- unstable_cache & React cache()
- Incremental Static Regeneration (ISR)
- Server Actions for Data Mutations