prefetch
API reference for the prefetch route segment config.
The prefetch route segment config controls how a segment is prefetched during client-side navigation. The default ('auto') lets Next.js manage the strategy on your behalf — today that always means a static prefetch. The other options let you declare which prefetch behavior is appropriate for the segment. Use them with care, since they can affect both navigation latency and prefetch cost.
When you do set this export, consider pairing it with instant so validation can confirm that navigations to this segment actually produce an instant UI from the prefetched data. This is especially important for runtime prefetching.
Good to know:
- The
prefetchexport only works whencacheComponentsis enabled. prefetchcannot be used when the segment is a Client Component.
Options
'auto' (default)
Lets Next.js manage prefetching for this segment. Today this always means a static prefetch — to permit runtime prefetching, opt in explicitly with 'allow-runtime'.
A future release will use instant validation to choose between static and runtime prefetching automatically. Leaving the default in place means your app will pick up that improvement without code changes.
You typically don't need to set this explicitly — omitting the export has the same effect.
'allow-runtime'
Allows Next.js to prefetch this segment at runtime. Today, setting this option causes Next.js to issue a runtime prefetch request, so the server can render a fresh response that includes runtime data like cookies, headers, and search params. Use this for personalized content when the latency and cost of runtime prefetching are appropriate for the segment.
Good to know: When Next.js runtime-prefetches a segment, all downstream segments are included in the same runtime prefetch request. This means segments deeper in the tree that are configured with 'force-static' or 'force-disabled' will still be prefetched as part of the runtime response.
'partial'
Opts the segment into Partial Prefetching without enabling the global partialPrefetching flag. A <Link> pointing at a segment with prefetch = 'partial' loads the per-route App Shell instead of the legacy full prefetch. Set this on the destination, not the link.
Use this for incremental adoption when you can't enable partialPrefetching for the entire app at once. Once every route in scope has prefetch = 'partial', enable the global flag and remove the per-route exports.
'force-static'
Always prefetch this segment statically, even if it has not been validated with instant. Use this when you know the segment produces a valid static shell but do not want to set up instant validation.
'force-disabled'
Never prefetch this segment. The client will not request segment data ahead of navigation. Use this for segments where prefetching would be wasteful, for example pages behind authentication that are rarely visited.
Good to know: 'force-disabled' does not prevent Next.js from prefetching metadata about the route. However, the actual segment data for this segment and all deeper segments will be omitted from prefetching.
Relationship with the <Link prefetch> prop
The prefetch segment config and the <Link prefetch> prop control different aspects of prefetching:
- The segment config informs Next.js about a segment's caching characteristics — whether its data can be prefetched statically, is suitable for a runtime prefetch with the user's session, or should be skipped entirely. This applies to the segment regardless of which link points to it.
- The
<Link prefetch>prop reflects the anticipated intent of a specific link on a specific page. A link that users rarely click can be deprioritized withprefetch={false}, independent of how the destination segments are configured.
In general, both of these are special circumstances. The default behavior — where Next.js manages prefetching for you — is optimized to provide a good navigation experience without manual configuration.
TypeScript
Version History
| Version | Changes |
|---|---|
v16.x.x | prefetch export introduced (Cache Components only) |