本文源自 Vercel 官方部落格,針對開發者從 Pages Router 轉移至 App Router 時常見的觀念混淆進行梳理。重點指出過度使用 'use client'、在客戶端進行不必要的資料獲取、未正確處理快取與 Route Handlers,以及 Context Provider 的錯誤封裝。文章提供了具體的程式碼對比,幫助開發者優化 Next.js 應用的效能與架構。
Vercel 介紹了 Next.js 13 App Router 的全新資料獲取機制。新架構淘汰了傳統的 getServerSideProps 等方法,改在 React 伺服器組件(RSC)中直接使用 async/await 與原生 fetch。這不僅大幅減少了樣板程式碼,還透過自動快取、並行請求與 HTML 串流(Streaming)技術,顯著提升了使用者體驗(UX)。