前端框架新格局:從過去一年的演進看未來趨勢

作者 | Philippe Serhal
譯者 | Sambodhi
策劃 | Tina
Web 開發領域始終在不斷演進,過去一年也不例外。我們知道,你忙於迭代和釋出新功能,難以時刻關注行業的所有動態。
幸運的是,Netlify 匯聚了一群熱衷於打造更優質 Web 體驗的技術愛好者。我們的框架工程團隊始終緊跟技術趨勢,並認真記錄行業動態(你絕對不會想知道我們加入了多少個 Discord 伺服器)。正因如此,我們才能為 Next.js 15、Svelte 5、Angular 18、Astro 5 ,甚至 Nuxt 4 提供預釋出支援的關鍵所在。那麼,為什麼不把這些技術洞見分享給開發者社群呢?
繼續閱讀,瞭解過去一年的技術趨勢與意外變化,速覽前端框架的重要更新(涵蓋十餘項重大版本釋出及多款新興框架),並掌握未來的發展方向,助你始終站在技術前沿。
框架相互“抄作業”
Server Functions 模式廣泛普及
Next.js 的 Server Actions 在跨越瀏覽器與伺服器的鴻溝時,提供了類似 tRPC 的開發體驗:從瀏覽器呼叫伺服器上的函式時,框架會在底層將其轉換為傳送給伺服器的 fetch 請求,並提供完整的型別安全。
2024 年,這一模式已擴充套件至其他全棧框架:
  • React 19 正式推出了穩定版 Server Functions,透過新的“use server”指令實現對 Server Actions 的通用化。
  • Astro 正式釋出了穩定版 Actions,遵循相同的模式。
  • SolidStart 1.0 釋出時支援了 Solid Actions,並引入了更通用的“use server”指令。(雖然 1.0 版本 2024 年才推出,但這是該模式的首個實踐。)
  • TanStack Start 推出了一個支援 Server Functions 的測試版,能夠從瀏覽器(自動轉換為 fetch 請求)和伺服器(按原樣)進行呼叫。
元件級預渲染成為主流
早期,有 SSG (Static Site Generation,靜態網站生成)和 SSR (Server-Side Rendering,伺服器端渲染)。近年來,許多框架開始支援混合模式,允許部分路由進行預渲染(或靜態渲染),而其則動態渲染。Next.js 的 App Router 甚至可以基於啟發式規則自動實現這一功能。
最近,框架在此基礎上進一步發展,允許頁面的某些部分進行預渲染(Static Shell,靜態外殼),而其餘部分則在伺服器上動態渲染。React 透過 <Suspense> 和 Streaming SSR 推廣了這一模式,但直到最近,元框架(meta-framework)才開始全面實現這一特性:Remix 自 2023 年起便已支援,而 Next.js 則在同年首次宣佈對所謂的部分預渲染“Partial Prerendering (PPR) ”提供實驗性支援。
這可能需要單獨撰寫一篇文章,但以下是 2024 年更新的核心要點:
  • 在 Next.js 14 中試驗性使用 PPR 一年後,Next.js 15 釋出並未對 PPR 進行任何更新,因為團隊仍在應對該特性暴露出的複雜性。
  • React Router 7 釋出了與 Remix 2 相同的功能。
  • 新興的基於 React 的框架 TanStack Start 釋出了 Beta 版,採用 相同的模式。
  • Astro 5 釋出了 Server Islands,滿足類似需求,但採用了基於 Web 標準的實現,允許任何平臺快取靜態外殼,甚至是獨立的動態部分。
訊號機制名稱不同,本質依舊相同
為實現瀏覽器中的互動性,同時避免讓開發者手動管理所有狀態(例如 jQuery)或在每次變更時重新渲染整個頁面,框架必須追蹤網頁 UI 和資料中所有變數間複雜的依賴關係網路。這通常被稱為框架的“響應式”(reactivity)模型。
框架的響應式模型是各框架獨特性的核心之一。它體現在語法規則和約束中,塑造開發者的思維方式,決定了效能的優劣,也是常見的 Bug 來源!以 React 為例,你可能已經熟悉 React 的響應式模型:Hooks(2018 年 React 16.8 引入)及更早的shouldComponentUpdate方法。
2010 年首個框架問世以來,響應式模型經歷了多次變化。(如需更深入瞭解,請參閱 A Hands-on Introduction to Fine-Grained ReactivityThe Evolution of Signals in JavaScript)或 Solid.js 作者 Ryan Carniato 的相關著作。)2024 年,我們正見證新一輪技術變革,三大主流框架相繼推出全新響應式模型:
  • Svelte 5 引入了 Runes,其靈感主要來自 Solid.js 的 Signals。
  • Angular 18 引入了實驗性的“無 Zone.js ”變更檢測,並在 Angular 19 中繼續迭代基於 Signals 的新的響應式模型。
  • React 釋出了 React Compiler 的 Beta 版,這種方法依賴於構建時的靜態分析來計算元件的依賴關係。這種方法已被 Svelte 使用多年,但與大多數框架(如 Vue)常用的執行時 響應式模型有很大不同。
此外,一項為 JavaScript 引入標準 Signal 實現的提案已於 2024 年進入第一階段。
Astro:站上同一起跑線
Astro 是一個相對較新的前端框架,近期備受關注(在最新發布的 State of JS 2024 報告中,Astro 在興趣度、留存率和使用者滿意度三項指標中均位列第一)。
雖然 Astro 仍然堅守其內容驅動型網站輕量級框架的定位,但在 2024 年添加了多個關鍵功能,以回應部分批評:
  • Actions:Astro 對 Next.js Server Functions 的回應(參見上文)。
  • Server Islands:Astro 對 Next.js 部分預渲染(PPR)功能的回應(參見上文)。
  • Content Layer:Astro 對 Gatsby 的 GraphQL 資料層的回應。
  • Sessions:Astro 提供的一種實驗性的儲存無關解決方案,用於處理使用者會話(類似 Remix sessions、NuxtAuth、NextAuth.js)。
  • Astro DB 和 Astro StudioAstro:不再堅持自建 SaaS,而是轉向平臺無關的資料庫介面層,可與關係型資料庫對接。
Vite 影響力進一步提升
Vite 是一款功能齊全的打包工具、編譯器和開發伺服器,專為 Web 開發設計。
2024 年,它成為 Web 開發者的首選工具,無論是 React、Vue、Svelte,甚至是無框架開發,Vite 都備受青睞。憑藉其在效能、開箱即用功能和極高可配置性方面的優勢,在短短幾年內迅速崛起。
Vite 還是 Astro、Nuxt 和 SvelteKit 等元框架的底層構建工具—— 事實上,這種雙重性正是 Vite 成功的一個重要原因。
2024 年,Remix 釋出了對 Vite 的支援(並隨後放棄了自家編譯器)、Hydrogen 也切換到 Vite,甚至傳統的 Ember.js 框架也開始向 Vite 過渡。
至此,Next.js(Webpack/Turbopack)和 Gatsby(Webpack)成為僅存的兩個仍未採用 Vite 的主要前端元框架。
Nitro 不再只屬於 Nuxt
Nitro 是一個功能全面的伺服器引擎庫,為框架提供通用開發和生產伺服器層,支援多種部署目標,如 Node.js、Deno、Netlify Functions、Netlify Edge Functions、Cloudflare Workers 等。
過去,Nitro 僅被 Nuxt 使用。
2024 年,AnalogJS 1.0 釋出、SolidStart 1.0 釋出,以及 TanStack Start 宣佈釋出並迅速進入 Beta 階段。這三個新興框架均基於 Vite 和 Nitro。更重要的是,這一組合被重新打包成名為 Vinxi 的中間層,並被 SolidStart 和 TanStack Start 採用,大大降低了新框架的入門門檻。
此外,Angular 還宣佈,他們正在探索遷移到 Nitro。
執行時和平臺相容性增強
2024 年是相容性大幅提升的一年!
  • Deno 2 推出,完整相容 Node.js 和 NPM 模組。所有框架現在都可以在 Deno 執行時上執行!
  • Cloudflare Workers 執行時大幅提高了與 Node.js 和 NPM 模組的相容性。
  • Bun 在這一年中逐步增加了對  Node.js 的相容性。
  • Next.js 宣佈支援在中介軟體執行 Node.js 執行時。
  • Vite 6 釋出了環境 API,未來將為多個框架的執行時和平臺相容性帶來改進(見下文)。
  • Next.js 在開放性方面取得了顯著進展:
    • 由 SST 發起的 OpenNext 計劃吸引了 Cloudflare 和 Netlify 的加入。
    • Next.js 15 在自託管方面也做出了改進,豐富了相關文件。
    • Vercel 成立了獨立的 Next.js GitHub 組織,提供了部署到 Vercel 競品的示例。
  • Node.js 的新特性:
    • Node.js 22.0.0 實驗性支援 require() 方式匯入 ES 模組。
    • Node.js 23.6.0 實驗性支援 TypeScript 語法。
開發者體驗持續提升
基於 Rust 的超快構建工具即將面世
用 Rust 編寫新編譯器和打包工具的多項工作正在進行中,並在 2024 年取得了顯著進展:
  • Turbopack,Next.js 對 Webpack 的 Rust 替代方案,在開發階段被標記為穩定版,並將很快成為預設設定。
  • Rspack,Webpack,Webpack) 的 Rust 直接移植,已釋出穩定的 1.0 版本。
  • Rolldown 是用 Rust 編寫的與 Rollup 相容的打包工具,在聖誕節釋出了 Beta 版,獲得了資金以加速其開發,同時釋出的還有 Vite 和 Oxc。在不久的將來,Rolldown 將取代 Rollup 和 ESBuild,成為 Vite 的底層引擎,構建速度和開發伺服器效能都將提升一個數量級。
遷移變得前所未有的簡單
遷移程式碼修改工具自動化處理繁瑣工作
在 2024 年,Next.js 15、React Router 7、Astro 5、Nuxt 4 和 Svelte 5 都提供了官方(甚至是內建)的升級工具(程式碼遷移工具)。大多數工具依託 Codemod.com 平臺開發併發布的,極大簡化了程式碼遷移的過程。
利用 “未來標誌”,自由選擇新特性
過去,要麼推遲痛苦的升級,要麼選擇早期不穩定版本。如今,許多框架都採用了 “未來標誌(Future Flags)” 模式,不穩定的新功能和重大更改作為可選配置釋出,可以根據需求選擇性啟用,而無需等待下一個大版本。著名的例子包括 Astro 的實驗性標誌、 Remix 的未來標誌 和 Angular 的實驗性提供者等。
一些框架(如 Nuxt)將這種方法的優勢發揮到了極致 —— 你可以將 compatibilityVersion 設定為 4, 在 Nuxt 3 中選擇啟用 Nuxt 4,這實際上只是切換了十幾個特性和重大更改。一旦 Nuxt 4 釋出,這些切換將成為預設設定。
破解型別檢查的難題
儘管 TypeScript 佔據主導地位多年,但在 Web 框架中仍有一個小而重要的領域沒有完全型別支援:路由引數、查詢引數以及基於檔案的路由間交叉引用。
在 2024 年,我們看到新興框架 TanStack Start 採用了全新的方法解決這一問題,它為基於檔案的路由提供了 100% 的端到端型別安全,其中大部分型別甚至可以自動推導。另一方面,Remix 的繼任者 React Router 7 放棄了完全基於檔案的路由,並引入了型別生成步驟,以實現類似的效果。與此同時, Next.js、Nuxt 和 Qwik 也在開發各自的解決方案。
新興框架推動生態向前發展
正如上述所有動向所表明的,前端框架的發展節奏依然迅猛,這很大程度上歸功於新興框架的創新與推動。以下是 2024 年值得關注的一些框架,或許能成為你 2025 年的研究專案:
  • AnalogJS:Angular 生態的元框架(自 2024 年 3 月起穩定釋出)
  • Deno Fresh:基於 Preact 的框架,針對邊緣渲染進行了最佳化(自 2022 年 6 月起穩定釋出)
  • HTMX:迴歸 Web 基礎的框架(自 2020 年 11 月起穩定釋出)
  • One:基於 React 的實驗性框架(2024 年 10 月剛剛釋出)
  • RedwoodJS:內建眾多功能的全棧 React 框架(2022 年 4 月穩定釋出)
  • SolidStart:Solid.js 生態元框架(自 2024 年 5 月起穩定執行)
  • TanStack Start:新的 React 元框架(自 2024 年 12 月起進入 Beta 階段)
  • Qwik,引入 resumability 替代 hydration 的新型框架(2023 年 5 月穩定釋出)
年度重要釋出
2024 年共有 11 個 重要的前端框架版本釋出:
  • 3 月 14 日:AnalogJS 1.0
  • 5 月 21 日:SolidStart 1.0
  • 5 月 22 日:Angular 18
  • 9 月 6 日:RedwoodJS 8
  • 10 月 2 日:Eleventy 3
  • 10 月 19 日:Svelte 5
  • 10 月 21 日:Next.js 15
  • 11 月 19 日:Angular 19
  • 11 月 22 日:React Router 7 (即 Remix 3)(值得一提的是:2024 年 5 月 15 日,Ryan Florence 在 React Conf 上宣佈 Remix 框架和 React Router 庫將合併,並且 Remix 品牌將“暫時休眠”。)
  • 12 月 3 日:Astro 5
  • 12 月 5 日:React 19
此外,還有一些重要的生態專案釋出:
  • 4 月 24 日:Node.js 22
  • 8 月 28 日:Rspack 1.0
  • 10 月 3 日:bolt.new
  • 10 月 9 日:Deno 2
  • 11 月 26 日:Vite 6
贊助與融資動態
2024 年,一些核心專案宣佈了融資和合作訊息:
  • 3 月 26 日:Builder.io 將 Qwik 交由社群運營
  • 4 月 24 日:Builder.io(Qwik 的維護者)獲得 2000 萬美元融資
  • 7 月 15 日:Astro 與 Netlify 合作
  • 9 月 30 日:Evan You 成立 VoidZero,獲得 460 萬美元風投,以支援 Vite、Vitest、Rolldown 和 OXC 發展。
  • 12 月 2 日:Astro 與谷歌合作
特別關注
  • 框架對來自瀏覽器的單飛請求(Single Flight)機制表現出了重新關注:Remix 引入了 Single Fetch(現已成為其繼任者 React Router 7 的預設設定),SolidStart 1.0 推出了 Single Flight Mutations,TanStack Start 也在進行同樣的工作。
  • Angular 推出了 Event Replay 功能:允許在頁面尚未完全互動化時捕獲使用者操作,並在頁面載入後回放,目前尚不清楚其他框架是否會跟進。與此同時,Qwik 透過設計 resumability (恢復性渲染)完全繞過了這個問題。
  • Astro 透過與生態系統的合作推動 Web 標準改進,不僅讓自身受益,也讓整個 Web 變得更好。
  • 2024 年底,大部分 Web 開發社群大規模遷移到了 Bluesky。
2025 年值得期待的變化
  • Angular** 預計將在 5 月釋出 Angular 20,11 月釋出 Angular 21**。請檢視 Angular 路線圖,瞭解即將釋出的內容。
  • Node.js 18 將於 4 月達到生命週期結束 (EOL) 狀態。請務必儘快升級你的應用。(Netlify 也建議儘早升級到 Node.js 22。)
  • Nuxt 4 預計將在 2025 年正式釋出,目前已基本準備就緒。(在 Netlify 上可提前體驗)。
  • Vite 引入環境 API 將於 2024 年底在 Vite 6 中釋出,它將極大地改善許多基於 Vite 的框架的本地開發體驗,尤其是在穩定性、生產環境一致性和執行時相容性方面。
  • TanStack Start 預計將在 2025 年釋出 RC 版本,甚至可能是 1.0 正式版
  • Qwik 2.0 將釋出
  • TanStack 和 Netlify 可能會有新合作。👀
原文連結
https://www.netlify.com/blog/2024-frameworks-year-in-review/
宣告:本文由 InfoQ 翻譯,未經許可禁止轉載。
今日好文推薦
騰訊元寶連夜修改使用者協議!“霸王”條款衝上熱榜,你的內容到底誰說了算?
“抄襲”程式碼,到底是 CTO 的鍋還是創始人的鍋?!這事兒已經撕3天了
分散式系統程式設計已停滯?!
Curl 之父:我是如何枕著18萬行C程式碼還能安穩入睡的

相關文章