Next.js 14進一步提高本地開發效率,還新加入部分預渲染功能
· 2023-10-31

新推出的Next.js 14進一步提高本地開發效率,透過Turbopack加速網頁打包,還最佳化伺服器資料處理,並且運用部分預渲染加速動態內容的初始回應

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

Popular articles
B2B Tech Infrastructure Gains Momentum in Philippine Gaming Sector
Southeast Asia
Vietnam’s Controlled Gaming Shift Gains Ground, But Domestic Demand Still Lags
Southeast Asia
Online gambling, crypto pose ongoing money laundering risks in Philippines, analyst says
Southeast Asia
Institutional Academy that exceeded expectations marked the opening of GAT CDMX
Online Game
SBC Summit Canada to Make Player Safety a Key Pillar of 2026 Agenda
Marketing
Across 6 Cities: HUIDU Invites You to 8 World Cup Parties Redefining High-Value Social Networking
HUIDU Focus
GGC Awards 2026 Shines in Colombo: Honoring Leaders and Innovators in the iGaming Industry
HUIDU Focus
Vietnam's tightening online gaming policy creates new market opportunities
Southeast Asia
UK MPs reopen 2025 gambling inquiry as reform stalls
Regulation
JILI Partners with Cricket Legend AB de Villiers (ABD) to Launch Exclusive Branded Game Series 100% 11
Sports Game
PropellerAds Shared a New iGaming Case Study: 97,674 Installs and 12,701 Deposits in 3 Months
Marketing
British gambling levy rates confirmed for each vertical
Regulation
Super PAC Raises $48 Million: Sports Betting Forces Ramp Up Political Push
Regulation
GAT Expo Puerto Rico Will Pulse with the New Era of Gaming in the Caribbean
Marketing
GAT CDMX 2025 Institutional Academy: Leaders and Experts Analyze the Present and Future of the Gaming Industry in Mexico and Lat
Sports Game
Home
Game
Cooperation
Find
My