prefetching

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