Next.js 16.3 點查撳 link 冇反應：Instant Navigations 實用拆解

Next.js 16.3 正式版加入 Instant Navigations，針對 App Router 一個幾常見但又幾難捉嘅問題：用戶撳咗 link，網址轉咗或者按鈕有反應，但畫面仲停喺舊嗰頁。iThome 報道集中講預載同開發工具，開發時最實用嘅係：以前只係覺得轉頁窒一窒，而家可以搵到邊度阻住、驗證修正有冇效，仲可以加測試防止翻發。

「即時」唔代表資料全部載完

Next.js 官方對 instant 嘅定義幾務實：用戶撳 link 嗰刻，瀏覽器已經有足夠嘅靜態內容、cache 結果或者 fallback，可以立即開始畫新一頁；未返到嘅動態資料就留喺 <Suspense> 後面，等 server 逐段送過嚟。換句話講，Instant Navigations 改善嘅係第一下視覺回應，唔會令慢 API、資料庫查詢或者第三方服務自己加速，而且官方亦提醒，cache 未熱好嘅首次切換仍然可能要等。

真正麻煩通常出喺 shared layout。直接開頁時，root layout 嘅 <Suspense> 或者 loading.tsx 可能接得住所有 async 工作；但由 /shop/shoes 撳去 /shop/hats，Next.js 只會重畫共同 /shop layout 以下嘅部分。放喺更高層嘅 fallback 呢刻幫唔到手，舊畫面就會一直留低。呢個亦解釋咗點解開新分頁睇落正常，站內切換反而會卡住。

圖片：Next.js

Instant Insights 幫你指出邊段 code 阻路

啟用 cacheComponents: true 後，16.3 會喺開發模式驗證 Page 同 Default segment。遇到未受 cache 或 <Suspense> 保護嘅資料讀取，dev overlay 會顯示 blocking-route 提示，連出事 component 同建議修正方向都列埋。團隊亦可以喺個別 page 或 layout export instant = true，明確標示呢條路徑應該即時；真係避唔到阻塞嘅登入或個人化 layout，就用 instant = false 收窄驗證範圍。

要留意，Next.js 16.3 本身係正式版，Instant Navigations 呢套規則仍有實驗性質。instant 只喺 Cache Components 下生效，相關全域設定仍放喺 experimental.instantInsights，官方亦寫明預設驗證級別日後可能改。現階段預設只會喺開發模式出 warning，唔會令 production build 失敗，所以較適合先揀 checkout、搜尋結果、文章切換呢類重要路徑試用。

Partial Prefetching 控制預載成本

全站加上 partialPrefetching: true 後，Next.js 預設只會為每條 route 預載一份可以重用嘅 App Shell，params、search params 同其他逐條 link 先有嘅資料之後再補。頁面就算擺咗幾十條去同一類商品頁嘅 link，都可以共用嗰份 shell，唔使每條 link 預先拉完整內容。未想一次過全站開啟，亦可以喺指定 segment export prefetch = 'partial'，逐區搬過去。

至於 <Link prefetch={true}>，佢會要求更積極嘅 runtime prefetch，連逐條 link 嘅資料都提早準備。用喺結帳下一步或者高機會撳入去嘅內容幾合理；如果一個長列表每條 link 都咁做，涉及 cookies、headers 或即時資料嘅頁面就可能提早消耗 server CPU。預載範圍要跟撳入去嘅機會調整，唔好見到 true 就當免費加速掣。

Navigation Inspector 先睇用戶等緊時見到咩

開咗 Cache Components，Next.js DevTools 會提供 Navigation Inspector。打開「Pause on navigations」後，refresh 可以停喺首次載入嘅 static shell；再撳站內 link，就會停喺 client navigation 實際用到嘅預載畫面。兩種入口都要試，因為 fallback 所處嘅 layout 層級唔同。配合 React DevTools 嘅 Suspense panel，通常好快睇到係骨架畫面太空、boundary 擺得太高，定係某段 uncached data 擋住成頁。

修好之後可以用 @next/playwright 提供嘅 instant() helper 鎖住結果，例如要求商品名同庫存 fallback 撳 link 後立即出現，再等動態庫存流入。咁日後有人重整 component 或搬 layout，CI 就有機會早過上線發現切換又窒返。重要流程寫幾個針對性測試已經夠，冇必要為網站每條 link 複製同一套 case。

升級前先分清 16.3 同 16 大版本變動

由 16.2 升上 16.3，Instant Navigations 同 Partial Prefetching 都係自行開啟；由 15 或更舊版本直升，就要另外跟 Next.js 16 migration guide，檢查 async params、proxy.ts、parallel route 嘅 default.js、image 預設值同 cache 行為。用過 16.3 Preview 嘅團隊亦要更新名稱：正式版文件用 instant 同 prefetch，唔再用早期嘅 unstable_instant、unstable_prefetch 寫法，預載策略亦已經同驗證設定拆開。

GitHub release 列出嘅改動數量相當大，當中好多係 Turbopack、內部 cache、測試同修 bug 嘅 commit，唔應全部當成網站用戶直接睇到嘅新功能。實際升級可以先喺 staging 開 Cache Components，逐條高流量 route 用 Inspector 檢查，再比較預載 request、server 負載同轉頁畫面；確認呢三樣都合理，先擴到全站會穩陣好多。

參考來源

• iThome — 網頁開發框架Next.js 16.3正式版強化即時導覽，新增工具找出頁面切換延遲 — original report
• Next.js 16.3 官方發布文章 — 核對正式版日期、Instant Navigations、Partial Prefetching 同其他版本更新。
• Next.js Instant Navigation 官方指南 — 核對 instant 定義、shared layout、Suspense、Navigation Inspector 同 Playwright 用法。
• Next.js Partial Prefetching 設定文件 — 核對啟用條件、App Shell 重用方式同 runtime prefetch 成本。
• Next.js 16.3.0 GitHub Release — 確認正式 release 同完整改動範圍，避免將內部 commit 當成一般功能。
• Next.js 16 升級指南 — 核對由舊版本升級時要處理嘅 breaking changes 同 codemod。

本文根據原文及公開資料整理；資料有出入時，以原文及官方資料為準。