使用Next.js連結兩個頁面中,我提到了如何使用Link Next.js組件在兩個頁面之間建立連結。當您使用它時,Next.js會透明地處理前端路由,當用戶點擊鏈接時,前端會負責在無需觸發新的客戶端/服務器請求和響應循環的情況下顯示新頁面,這通常是網頁的情況。

當使用Link時,Next.js為您做的還有一個事情。

只要使用<Link>包裹的元素出現在視口內(這意味著對於網站用戶而言是可見的),Next.js就會預取它指向的URL,只要它是本地鏈接(在您的網站上),使應用程式對於查看者來說極快。

這個行為只在生產模式下觸發(稍後我們將詳細討論這個),這意味著如果您使用npm run dev運行應用程式,您必須停止應用程式,使用npm run build編譯生產束,然後使用npm run start運行它。

使用DevTools中的網絡檢查器,您會注意到在頁面加載時,位於折疊部分以上的所有鏈接都會在load事件在您的頁面上觸發後(在頁面完全加載後觸發,且在DOMContentLoaded事件之後)開始預取。

任何其他不在視口內的Link標籤將在用戶滾動並且它可見時被預取。

預取在高速連接上是自動進行的(Wi-Fi和3G+連接,除非瀏覽器發送Save-Data HTTP標頭)。

您可以通過將prefetch屬性設置為false來取消對個別Link實例的預取:

<Link href="/a-link" prefetch={false}>
 <a>一個鏈接</a>
</Link>