如何在 Next.js 中从一个页面请求中预取多个页面的代码？

Question

使用客户端导航，我可以仅使用 JavaScript 在页面之间导航。页面的第一个请求需要一些时间来呈现，然后导航回到该页面几乎是即时的。在第一次渲染期间，该页面仅加载其必需的内容。这隔离了每个页面，使它们独立。我只是想知道，是否有一种方法可以在单个请求上加载多个页面的代码。

举个例子，假设我有一个用户的多个个人资料页面（信息、设置、历史记录）。我想在对任何页面的一次请求中加载所有这些页面的代码，因此它们之间的导航将是即时的，并且不会有等待时间。

Answer 1

只要这些页面的链接（使用

next/link

）位于视口内，在生产模式下就会默认预取页面（但预取在开发模式下不起作用）。

prefetch

- 在后台预取页面。默认为

true

。 视口中的任何

<Link />

（初始或通过滚动） 将被预加载。可以通过传递来禁用预取

prefetch={false}

。当

prefetch

设置为

false

时，预取将 悬停时仍然发生。使用静态生成的页面将预加载 JSON 包含数据的文件以实现更快的页面转换。 预取仅在生产中启用。

如果您不使用

next/link

导航到这些页面，则可以使用

router.prefetch

强制预取。

router.prefetch(url, as) 

• url

  - 要预取的 URL，包括显式路由（例如

  /dashboard

  ）和动态路线（例如

  /product/[id]

  ）

• as

  -

  url

  的可选装饰器。在 Next.js 9.5.3 之前，这用于 预取动态路由，查看我们的 previous 文档 看看它是如何工作的

Answer 2

这让我感到惊讶，因为我在链接中手动添加了预取，现在页面立即打开。之前，加载页面需要几毫秒。

我不明白为什么，因为我在生产中发现了真正的默认值，但它对我来说效果不同。