partialPrefetching

partialPrefetching enables Partial Prefetching at the app level. The framework prefetches the static parts of each route by default; opt individual routes into runtime prefetching to fetch more.

Usage

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
}

export default nextConfig

module.exports = {
  cacheComponents: true,
  partialPrefetching: true,
}

partialPrefetching requires cacheComponents. Without it, next dev and next build throw at config validation.

Reference

How prefetches resolve

Before Partial Prefetching, Next.js prefetched per visible link: a page with N links to N routes produced ~N route prefetches as those links entered the viewport.

With partialPrefetching: true, Next.js prefetches one reusable App Shell per route instead. The shell carries the route's rendered output minus per-link data; specifics like params and search-bound data fill in after navigation. Shells are cached on the client, so a route is fetched once even if many links on the page point at it.

The pattern is similar to per-route code splitting in single-page apps: one artifact per route, shared by every link that points to it.

Good to know: Routes that read cookies() or headers() produce an App Shell that includes session data. The framework auto-detects this and caches the shell per session on the client.

A link can ask for more than the App Shell with <Link prefetch={true}>. The prefetch also resolves per-link runtime data like params, searchParams, and the full URL. See Runtime prefetching.

Good to know: If you use <Link prefetch={true}> to a route that hasn't opted into Partial Prefetching, a dev console error suggests enabling partialPrefetching app-wide or prefetch = 'partial' on the segment. The dev warning Insight covers each fix in detail.

Per-segment overrides

A segment that exports an explicit prefetch value overrides the app-level default for that route.

Version History