前端框架新格局：从过去一年的演进看未来趋势

作者 | 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 可能会有新合作。👀

原文链接：

https://www.netlify.com/blog/2024-frameworks-year-in-review/

声明：本文由 InfoQ 翻译，未经许可禁止转载。