原文地址：A Visual Guide to Prefetching in Next.js 13，2023年7月7日，Vishwas Gopinath
想象一下：用户点击一个链接，迫不及待地期待着要看下一页的内容。眨眼间，内容就像魔术般地出现了，仿佛网站准确知道用户想要什么。这就像拥有一台能预测你每个动作的“心灵捕手”服务器。接下来将为大家介绍 Next.js 13 中强大的预取概念。
预取（Prefetching）
预取是一种用于加快网页加载速度的技术，它在实际需要之前就在后台预先加载了一些内容。与等待用户点击链接然后从服务器获取内容不同，预取会主动地加载预期的页面或网站的部分。这样，当用户最终请求该内容时，几乎可以立即显示出来，消除了任何明显的延迟。
<link rel="prefetch" href="https://www.builder.io/about-us" />
link 元素 rel 属性的 prefetch 关键字是一种对浏览器的提示，表明用户可能在未来导航中需要的目标资源，因此浏览器可以通过预先获取和缓存资源来提高用户体验。
? 这里有一些资源可以获取更多关于 dns-prefetch、preconnect 和 preload 的知识。
开发期间的预取
在 Next.js 13 的开发阶段，预取路由非常顺畅。当你简单地将鼠标悬停在用户界面的 <Link> 组件上时，会自动发生预取。这表示在开发过程中，当你浏览网页时，Next.js 会根据你的交互自动获取和缓存下一页内容，提供了一种无缝体验，并让你对最终性能有所了解。
可视化
生产构建物中的预取
一旦你的应用程序构建完成并准备好投入生产，Next.js 13 会进一步改进预取功能。在生产环境中，当路由在视口中可见时就会进行预取。这可以发生在初始页面加载期间或用户滚动浏览网页时。只要一个 <Link> 出现在视图中，Next.js 就会主动获取和缓存路由内容，确保当用户点击链接导航时，页面切换是即时的。
可视化
关闭预取功能
虽然预取可以极大地提升用户体验，但 Next.js 在这方面也提供了灵活性。因为有时需要考虑自定义或限制其行为的特定场景。如果想禁用特定链接的预取功能，只需在 <Link> 组件上使用 prefetch 属性，并将其设置为 false 即可。
<Link href="/blog" prefetch={false}>Blog</Link>
这样可以防止 Next.js 在用户悬停链接时预取内容。这对于节省带宽或解决与预取相关的数据访问或跟踪隐私问题非常有用。
以编程的方式预取路由
Next.js 还提供了一种方法，就是使用 useRouter 钩子返回的 router 对象的 prefetch 方法，以编程方式预取路由。
import { useEffect } from "react";
import { useRouter } from "next/router";
const MyComponent = () => {
const router = useRouter();
useEffect(() => {
router.prefetch("/predicted-route");
}, [router]);
return (
// Component content
);
};
通过使用 router.prefetch() 方法，并传入路由的完整路径，就可以预取特定路由。当你事先知道用户可能要导航到某个页面时，这非常有用。通过提前预取，可以确保无缝且即时的页面切换，而不需要进行任何额外请求。
总结
预取路由是 Next.js 13 提供的一种强大技术，用于优化网页加载并创建流畅的导航体验。通过预测用户行为提前获取内容，显著减少了网页的加载时间，并实现了页面间的无缝切换。
在开发过程中，当悬停在 <Link> 组件上时，路由会被预取，提供给大家实时预览的性能体验。在生产构建中，路由会在视口区域出现后被预取，确保能快速切换。
当然，我们也可以灵活调整预取行为，在特定链接上禁用预取或以编程方式预先获取用户可能会访问的路由。通过正确使用，预取可以将你的 Next.js 应用推向新高度，并提供卓越的用户体验。
