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

  Web 开发领域始终在不断演进，过去一年也不例外。我们大家都知道，你忙于迭代和发布新功能，难以时刻关注行业的所有动态。

  幸运的是，Netlify 汇聚了一群热衷于打造更优质 Web 体验的技术爱好者。我们的框架工程团队始终紧跟技术趋势，并认真记录行业动态（你绝不会想明白我们加入了多少个 Discord 服务器）。正因如此，我们才可以为 Next.js 15、Svelte 5、Angular 18、Astro 5 ，甚至 Nuxt 4 提供预发布支持的关键。那么，为啥不把这些技术洞见分享给开发者社区呢？

  继续阅读，了解过去一年的技术趋势与意外变化，速览前端框架的重要更新（涵盖十余项重大版本发布及多款新兴框架），并掌握未来的发展趋势，助你始终站在技术前沿。

  Next.js 的 Server Actions 在跨越浏览器和服务器的鸿沟时，提供了类似 tRPC 的开发体验：从浏览器调用服务器上的函数时，框架会在底层将其转换为发送给服务器的 fetch 请求，并提供完整的类型安全。

  TanStack Start 推出了一个支持 Server Functions 的测试版，能够从浏览器（自动转换为 fetch 请求）与服务器（按原样）进行调用。

  早期，有 SSG （Static Site Generation，静态网站生成）和 SSR （Server-Side Rendering，服务器端渲染）。近年来，许多框架开始支持混合模式，允许部分路由进行预渲染（或静态渲染），而其则动态渲染。Next.js 的 App Router 还可以基于启发式规则自动实现这一功能。

  最近，框架在此基础上逐步发展，允许页面的某些部分进行预渲染（Static Shell，静态外壳），而其余部分则在服务器上动态渲染。React 通过和 Streaming SSR 推广了这一模式，但直到最近，元框架（meta-framework）才开始全面实现这一特性：Remix 自 2023 年起便已支持，而 Next.js 则在同年首次宣布对所谓的部分预渲染“Partial Prerendering (PPR) ”提供实验性支持。

  在 Next.js 14 中试验性使用 PPR 一年后，Next.js 15 发布并未对 PPR 进行任何更新，因为团队仍在应对该特性暴露出的复杂性。

  Astro 5 发布了 Server Islands，满足类似需求，但采用了基于 Web 标准的实现，允许任何平台缓存静态外壳，甚至是独立的动态部分。

  为实现浏览器中的交互性，同时避免让开发者手动管理所有状态（例如 jQuery）或在每次变更时重新渲染整个页面，框架必须追踪网页 UI 和数据中所有变量间复杂的依赖关系网络。这通常被称为框架的“响应式”（reactivity）模型。

  框架的响应式模型是各框架独特性的核心之一。它体现在语法规则和约束中，塑造开发者的思维方法，决定了性能的优劣，也是常见的 Bug 来源！以 React 为例，你可能已熟悉 React 的响应式模型：Hooks（2018 年 React 16.8 引入）及更早的shouldComponentUpdate方法。

  React 发布了 React Compiler 的 Beta 版，这种方法依赖于构建时的静态分析来计算组件的依赖关系。这种方法已被 Svelte 使用多年，但与大多数框架（如 Vue）常用的运行时 响应式模型有很大不同。

  Astro 是一个相对较新的前端框架，近期非常关注（在最新发布的 State of JS 2024 报告中，Astro 在兴趣度、留存率和用户满意度三项指标中均位列第一）。

  虽然 Astro 仍然坚守其内容驱动型网站轻量级框架的定位，但在 2024 年添加了多个关键功能，以回应部分批评：

  Astro DB 和 Astro StudioAstro：不再坚持自建 SaaS，而是转向平台无关的数据库接口层，可与关系型数据库对接。

  Vite 是一款功能齐全的打包工具、编译器和开发服务器，专为 Web 开发设计。

  2024 年，它成为 Web 开发者的首选工具，无论是 React、Vue、Svelte，甚至是无框架开发，Vite 都备受青睐。凭借其在性能、开箱即用功能和极高可配置性方面的优势，在短短几年内迅速崛起。

  Vite 还是 Astro、Nuxt 和 SvelteKit 等元框架的底层构建工具—— 事实上，这种双重性正是 Vite 成功的一个重要原因。

  Deno 2 推出，完整兼容 Node.js 和 NPM 模块。所有框架现在都可以在 Deno 运行时上运行！

  Vite 6 发布了环境 API，未来将为多个框架的运行时和平台兼容性带来改进（见下文）。

  用 Rust 编写新编译器和打包工具的多项工作正在进行中，并在 2024 年取得了显著进展：

  Rolldown 是用 Rust 编写的与 Rollup 兼容的打包工具，在圣诞节发布了 Beta 版，获得了资金以加速其开发，同时发布的还有 Vite 和 Oxc。在不久的将来，Rolldown 将取代 Rollup 和 ESBuild，成为 Vite 的底层引擎，构建速度和开发服务器性能都将提升一个数量级。

  在 2024 年，Next.js 15、React Router 7、Astro 5、Nuxt 4 和 Svelte 5 都提供了官方（甚至是内置）的升级工具（代码迁移工具）。大多数工具依托平台开发并发布的，极大简化了代码迁移的过程。

  过去，要么推迟痛苦的升级，要么选择早期不稳定版本。如今，许多框架都采用了 “未来标志（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 年的研究项目：

  Deno Fresh：基于 Preact 的框架，针对边缘渲染进行了优化（自 2022 年 6 月起稳定发布）

  Angular 推出了 Event Replay 功能：允许在页面尚未完全交互化时捕获用户操作，并在页面浏览加载后回放，目前尚不清楚其他框架是否会跟进。与此同时，Qwik 通过设计 resumability （恢复性渲染）完全绕过了这个问题。

  Astro 通过与生态系统的合作推动 Web 标准改进，不仅让自身受益，也让整个 Web 变得更好。

  Nuxt 4 预计将在 2025 年正式对外发布，目前已基本准备就绪。(在 Netlify 上可提前体验)。

  Vite 引入环境 API将于 2024 年底在 Vite 6 中发布，它将极大地改善许多基于 Vite 的框架的本地开发体验，尤其是在稳定性、生产环境一致性和运行时兼容性方面。