Next.js 15 next-link 预取策略与视口感知实践 prefetch-router.prefetch

概览`next/link` 默认在链接进入视口时预取。对敏感或动态页面可禁用预取，并在交互时通过 `router.prefetch` 主动预取，兼顾性能与一致性。禁用视口预取import Link from 'next/link' export function Menu() { return ( <nav> <Link href="/dashboard" prefetch={false}>仪表盘</Link> <Link href="/products">产品</Link> </nav> ) } 交互主动预取'use client' import { useRouter } from 'next/navigation' export function PrefetchOnHover() { const router = useRouter() const href = '/products/1' return ( <a href={href} onMouseEnter={() => router.prefetch(href)} onFocus={() => router.prefetch(href)} >查看产品</a> ) } 治理要点将预取用于高频与安全页面；对需要鉴权或敏感数据的页面禁用。在用户意图明显的交互（悬停/聚焦）触发 `router.prefetch`，避免带宽浪费。与 `speculationrules`、缓存与优先级策略协同，进一步稳定导航路径。验证与指标浏览器：现代浏览器；Next.js：15.0+导航响应更快；敏感页面避免不必要的预取