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+导航响应更快；敏感页面避免不必要的预取