mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Aurora ScharffandGitHub
91c6309c52
## Summary
- update the Partial Prefetching adoption skill for the current runtime
prefetching model
- scope the Cache Components optimizer's runtime-prefetch limitation to
URL data
- preserve the optimizer pattern structure for URL data that cannot
move, with Partial Prefetching, targeted `<Link prefetch={true}>`, and
cached URL-data content as the requirements
- make the optimizer follow-up conditional: use targeted
`prefetch={true}` when the app already adopted Partial Prefetching,
otherwise recommend the PPF adoption skill for the broader shared App
Shell model
## Why
Andrew's Partial Prefetching work removes the old `allow-runtime`
route-config model. The skills should teach the current shape: Partial
Prefetching gives links a shared App Shell baseline with lower
duplicated prefetch cost, while `<Link prefetch={true}>` is reserved for
links where resolving URL-specific content before click is worth the
extra server work.
## Validation
- `git diff --check HEAD~1..HEAD`
- grep confirmed no `allow-runtime` / `force-runtime` references remain
in the changed Skill files
- attempted `skill-creator` quick validation, but the local Python env
is missing `yaml`
68 lines
3.4 KiB
Plaintext
68 lines
3.4 KiB
Plaintext
---
|
|
title: partialPrefetching
|
|
description: Configure the default link prefetch behavior to fetch only the static parts of each route.
|
|
related:
|
|
title: Related
|
|
description: View related API references and guides.
|
|
links:
|
|
- app/api-reference/config/next-config-js/cacheComponents
|
|
- app/api-reference/file-conventions/route-segment-config/prefetch
|
|
- app/api-reference/components/link
|
|
- app/guides/runtime-prefetching
|
|
---
|
|
|
|
`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](/docs/app/guides/runtime-prefetching) to fetch more.
|
|
|
|
## Usage
|
|
|
|
```ts filename="next.config.ts" highlight={5} switcher
|
|
import type { NextConfig } from 'next'
|
|
|
|
const nextConfig: NextConfig = {
|
|
cacheComponents: true,
|
|
partialPrefetching: true,
|
|
}
|
|
|
|
export default nextConfig
|
|
```
|
|
|
|
```js filename="next.config.js" highlight={3} switcher
|
|
module.exports = {
|
|
cacheComponents: true,
|
|
partialPrefetching: true,
|
|
}
|
|
```
|
|
|
|
`partialPrefetching` requires [`cacheComponents`](/docs/app/api-reference/config/next-config-js/cacheComponents). Without it, `next dev` and `next build` throw at config validation.
|
|
|
|
## Reference
|
|
|
|
| Value | Description |
|
|
| ------- | ------------------------------------------- |
|
|
| `true` | Enables Partial Prefetching across the app. |
|
|
| `false` | Default. No change to prefetch behavior. |
|
|
|
|
## 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](/docs/app/glossary#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}>`](/docs/app/api-reference/components/link#prefetch). The prefetch also resolves per-link runtime data like `params`, `searchParams`, and the full URL. See [Runtime prefetching](/docs/app/guides/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](/docs/messages/instant-link-prefetch-partial) covers each fix in detail.
|
|
|
|
## Per-segment overrides
|
|
|
|
A segment that exports an explicit [`prefetch`](/docs/app/api-reference/file-conventions/route-segment-config/prefetch) value overrides the app-level default for that route.
|
|
|
|
## Version History
|
|
|
|
| Version | Change |
|
|
| ------- | -------------------------------------------------------------------------- |
|
|
| 16.3.0 | `partialPrefetching` introduced. Requires `cacheComponents` to be enabled. |
|