在使用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>