Next.js, by default, automatically caches the returned values of fetch operations in the Data Cache.
The data cache is a server-side cache that persists the result of data fetches across incoming server requests and deployments.
The data cache improves app performance and reduces costs by eliminating the need to re-fetch data from your data source with every request.
- Improved Performance: Faster response times for subsequent requests
- Reduced Server Load: Fewer calls to the data source
- Cost Efficiency: Potential reduction in API calls or database queries
For individual data fetches, you can opt out of caching by setting the cache option to no-store.
Key points:
- Once you specify the
no-storeoption for a fetch request, subsequent fetch requests will also not be cached. - By default, Next.js will cache
fetch()requests that occur before any dynamic functions (cookies(),headers(),searchParams) are used. - Next.js will not cache requests found after dynamic functions.
const res = await fetch('https://...', { cache: 'no-store' });- Use caching judiciously based on your data's nature and update frequency.
- For frequently changing data or user-specific information, consider opting out of caching.
- Balance between performance benefits and data freshness when deciding caching strategies.
By understanding and effectively using Next.js's caching mechanisms, you can optimize your application's performance and resource usage.