pcie预取 不预取_在Next.js中预取内容

pcie预取 不预取

In linking 2 pages with Next.js I mentioned how the Link Next.js component can be used to create links between 2 pages, and when you use it, Next.js transparently handles frontend routing for us, so when a user clicks a link, frontend takes care of showing the new page without triggering a new client/server request and response cycle, as it normally happens with web pages.

在将2个页面与Next.js链接时，我提到了如何使用Link Next.js组件在2个页面之间创建链接，并且当您使用它时，Next.js 透明地为我们处理前端路由 ，因此当用户单击链接时，前端会负责显示新页面，而不会触发新的客户端/服务器请求和响应周期，这通常在网页中会发生。

There’s another thing that Next.js does for you when you use Link.

当您使用Link时，Next.js会为您做另一件事。

As soon as an element wrapped within <Link> appears in the viewport (which means it’s visible to the website user), Next.js prefetches the URL it points to, as long as it’s a local link (on your website), making the application super fast to the viewer.

只要包装在<Link>中的元素出现在视口中(这意味着它对网站用户可见)，只要它是本地链接(在您的网站上)，Next.js就会预取它指向的URL，从而对观看者来说应用程序超级快。

This behavior is only being triggered in production mode (we’ll talk about this in-depth later), which means you have to stop the application if you are running it with npm run dev, compile your production bundle with npm run build and run it with npm run start instead.

此行为仅在生产模式下触发(我们将在以后进行深入讨论)，这意味着如果使用npm run dev运行该应用程序，则必须停止该应用程序；使用npm run build编译生产包，然后运行用npm run start代替。

Using the Network inspector in the DevTools you’ll notice that any links above the fold, at page load, start the prefetching as soon as the load event has been fired on your page (triggered when the page is fully loaded, and happens after the DOMContentLoaded event).

使用DevTools中的网络检查器，您会注意到页面加载时折叠上方的所有链接在页面上触发load事件后立即开始预提取(在页面完全加载时触发，并在DOMContentLoaded事件)。

Any other Link tag not in the viewport will be prefetched when the user scrolls and it

用户滚动浏览时，视口中未包含的任何其他Link标签将被预取

Prefetching is automatic on high speed connections (Wifi and 3g+ connections, unless the browser sends the Save-Data HTTP Header.

除非浏览器发送Save-Data HTTP Header ，否则高速连接(Wifi和3g +连接)上的自动预取是自动的。

You can opt out from prefetching individual Link instances by setting the prefetch prop to false:

您可以通过将prefetch prop设置为false来选择不预取单个Link实例：

<Link href="/a-link" prefetch={false}>
  <a>A link</a>
</Link>

翻译自: https://flaviocopes.com/nextjs-prefetching/

pcie预取 不预取