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

Question

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

After that, we need to connect these pages. We could use an HTML tag for that. However, it won't perform client-side navigation; instead the browser will do a request to the server for the next page and refresh the page, which is not what we want.

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>
  );
}

稍后在他们的教程中，它说上述 Link 机制也支持浏览器后退按钮。为什么？

Client-Side History Support When you hit the Back button, it navigates the page to the index page entirely via the client; next/link does all the location.history handling for you.

You don't need to write even a single line of client-side routing code.

Simply link pages; it just works!

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

Answer 1

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

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

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

How could next.js Link avoid server request?

reactjs

next.js