Next.js 14進一步提高本地開發效率，還新加入部分預渲染功能

Vercel在開發者線上會議Next.js Conf，發表了最新的React網頁應用程式開發框架Next.js 14，這個新版本遵循Next.js 13的API基礎進行改進，強化本地開發的效能，並且最佳化伺服器端資料處理和渲染效率，進一步提升Next.js應用程式的效能和開發效率。

Vercel之前於Next.js 13加入了Turbopack Alpha測試版，這是一個能夠取代Webpack的高速網頁打包工具。雖然Webpack是一個被下載超過30億次的熱門工具，但是Vercel認為，該工具的執行速度，限制了Next.js的綑綁應用程式速度，因此尋求更快的替代方案。而Turbopack是以程式語言Rust開發而成，建構在增量架構之上，能以非常快的速度打包大型應用程式，更新速度是前端工具Vite的10倍，甚至是Webpack的700倍。

開發團隊在Next.js 14中採用漸進的方式，改善Pages檔案目錄和App Router本地端開發效能，並於Turbopack上進行5,000個整合測試，確保功能和效能符合預期。官方以vercel.com這個Next.js應用程式進行測試，獲得53.3%的本地端伺服器啟動加速，並且透過Fast Refresh實現94.7％的程式碼更新速度提升。

該基準測試是next dev通過90％測試的結果，而一旦Turbopack通過100％的next dev命令整合測試，將可達到更快更可靠的結果，官方會在接下來的次要版本更新中，發布Turbopack穩定版本。

而雖然Vercel開發團隊將重心擺在Turbopack的開發上，但同時也承諾，會繼續支援Webpack自定義配置以及生態系擴充套件的開發。

Next.js 14對表單和資料突變處理也提供了更簡單的方法，透過引入Server Actions，開發者不需要手動創建API路由，就可以直接從React元件中，安全地呼叫伺服器上的函式。這種方法簡化了資料突變的開發者體驗，由於Server Actions允許在一次網路往返傳輸，就完成資料突變、重新渲染頁面和重新導向等工作，因此能改善用戶在網路速度較慢，或是低功率的裝置上提交表單時的使用者體驗。

Vercel也在Next.js 14中引入一項稱為部分預渲染（Partial Prerendering）的編譯器最佳化功能，透過以伺服器端渲染、靜態網站生成和增量靜態重新驗證的技術作為基礎，對動態內容提供快速的初始靜態回應。官方提到，部分預渲染可以簡化開發模型，而且開發者不需要學習新API的使用方式。

部分預渲染利用React Suspense進行定義，因此當開發者啟用部分預渲染功能時，系統會生成<Suspense />界線的靜態區塊，並運用動態元件來替換區塊中的Suspense回退（Fallback），以支援像是讀取Cookies更新購物車，或是依據使用者更換網頁橫幅等情境。這些操作可以在同一個HTTP請求中串流傳輸動態元件，不需要額外的網路傳輸往返。