staleTimes
This feature is currently experimental and subject to change, it's not recommended for production. Try it out and share your feedback onGitHub.
staleTimes
is an experimental feature that enables caching of page segments in theclient-side router cache.
You can enable this experimental feature and provide custom revalidation times by setting the experimentalstaleTimes
flag:
next.config.js
/**@type{import('next').NextConfig} */constnextConfig= { experimental: { staleTimes: { dynamic:30, static:180, }, },}module.exports= nextConfig
Thestatic
anddynamic
properties correspond with the time period (in seconds) based on different types oflink prefetching.
- The
dynamic
property is used when the page is neither statically generated nor fully prefetched (e.g. withprefetch={true}
).- Default: 0 seconds (not cached)
- The
static
property is used for statically generated pages, or when theprefetch
prop onLink
is set totrue
, or when callingrouter.prefetch
.- Default: 5 minutes
Good to know:
- Loading boundaries are considered reusable for the
static
period defined in this configuration.- This doesn't affectpartial rendering,meaning shared layouts won't automatically be refetched on every navigation, only the page segment that changes.
- This doesn't changeback/forward caching behavior to prevent layout shift and to prevent losing the browser scroll position.
You can learn more about the Client Router Cachehere.
Version History
Version | Changes |
---|---|
v15.0.0 | Thedynamic staleTimes default changed from 30s to 0s. |
v14.2.0 | ExperimentalstaleTimes introduced. |
Was this helpful?