Prefetch one shared shell

Links reuse one prefetched App Shell; add prefetch={true} sparingly.

Next.js docsGuide · Adopting Partial Prefetching
The catch that decides most of the sweep: a default link warms only the shared App Shell.
GuideRead docs ↗

From next-partial-prefetching-adoption and patterns.md.

Twelve links scroll into view

Scroll the links into view, then click one.

prefetch={true} on allBad
<Link href={url} prefetch={true}> × 12
Default linksGood
<Link href={url}> + partialPrefetching: true
// next.config.ts
export default { cacheComponents: true, partialPrefetching: true }

// Default: every /product/[id] link shares one prefetched App Shell
<Link href={`/product/${p.id}`}>{p.name}</Link>

// Only where URL content must be ready before the click
<Link href={`/product/${hero.id}`} prefetch={true}>{hero.name}</Link>

Per-link content, before click

Tick what the hero link has, then click it.

/product/heroAfter click

// app/product/[id]/page.tsx
async function getProduct(id: string) {
  'use cache' // keyed by id, so a full prefetch can resolve it
  return db.products.find(id)
}

Why it matters, pros and cons

Why it matters

Every link to a route shares one App Shell, so a screen of links costs one prefetch, not one server call each.

Pros

  • Far fewer prefetch requests and bytes.
  • Clicks still commit to the shell at once.
  • prefetch={true} stays for links that earn it.

Cons

  • URL-specific content streams after the click.
  • Each per-link prefetch is a server call.
  • Needs Next.js 16.3+ with Cache Components.