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請求中串流傳輸動態元件,不需要額外的網路傳輸往返。

熱門新聞

Advertisement