next.js 链接如何避免服务器请求？

Question

https://nextjs.org/learn/basics/navigate-between-pages

之后，我们需要连接这些页面。我们可以为此使用 HTML 标记。但是，它不会执行客户端导航；相反，浏览器会向服务器请求下一页并刷新页面，这不是我们想要的。

import Link from 'next/link';

export default function Index() {
  return (
    <div>
      <Link href="/about">
        <a>About Page</a>
      </Link>
      <p>Hello Next.js</p>
    </div>
  );
}

后来在他们的教程中，上面的链接机制也支持浏览器后退按钮。为什么？

客户端历史记录支持当您点击返回按钮时，它会导航 页面到索引页面完全通过客户端；下一个/链接做所有 location.history 为您处理。

您甚至不需要编写一行客户端路由 代码。

简单的链接页面；它只是工作！

谁能解释一下为什么可以让浏览器避免服务器请求？ next.js 是否以某种方式实现了预取？

Answer 1

链接标签有一个属性prefetch，默认设置为true。当浏览器在屏幕上遇到Link标签时，Next js会prefetch渲染页面所需的JS。

如果您不希望页面为prefetched，可以将prefetch 设置为false。