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

作者 | 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 Reactivity、The 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 可能會有新合作。👀