預取內容在Next.js中的運作方式
在使用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實例的預取：
1 | <Link href="/a-link" prefetch={false}> |
tags: [“prefetching”, “Next.js”, “web development”]