一文了解React、Next.js、Vue、Nuxt和Svelte等框架的最新动态和趋势

一起来看看谷歌I/O大会的一篇演讲：关于JavaScript框架生态系统的概述，内容涵盖Angular、Astro、React、Remix、Next.js、Vue、Nuxt、Solid和Svelte等多个框架的最新动态和趋势。在过去的一年左右的时间里，JavaScript框架生态圈发生了许多变化。这份文档简要概述了近期的一些亮点。想要更深入讨论这些话题，可以查看今年Google I/O大会上的Ja

前端达人

689人浏览 · 2024-05-23 10:20:36

前端达人 · 2024-05-23 10:20:36 发布

一起来看看谷歌I/O大会的一篇演讲：关于JavaScript框架生态系统的概述，内容涵盖Angular、Astro、React、Remix、Next.js、Vue、Nuxt、Solid和Svelte等多个框架的最新动态和趋势。

在过去的一年左右的时间里，JavaScript框架生态圈发生了许多变化。这份文档简要概述了近期的一些亮点。想要更深入讨论这些话题，可以查看今年Google I/O大会上的JavaScript框架生态导航演讲。

框架趋势与融合

如图表所示，JavaScript框架正在向一些相似的功能和架构靠拢。这些包括基于组件的架构、基于文件的路由和现代的服务器端渲染（SSR）支持。这种融合表明了生态系统的成熟和演变，因为框架们互相学习并采纳最佳实践。

与此同时，一些新趋势（如服务器组件和对细粒度反应性的不同方法）继续使各个框架保持独特性。为了更好地理解这些趋势，我们将逐一深入探讨每个框架。

Angular

Angular最近的版本包含了多项重大变化，包括信号（Signals）、可延迟视图（Deferrable views）、NgOptimizedImage、非破坏性水合（Non-destructive hydration）和部分水合（Partial hydration）。一些亮点包括：

信号（Signals）：信号是多个框架（包括现在的Angular）用于跟踪应用程序状态的方法。Angular信号可以通过减少变更检测期间必须进行的计算数量，提高运行时性能，包括交互到下一次绘制（INP）。
可延迟视图：可延迟视图使得可以推迟特定组件、指令和管道的加载。例如，你可以推迟加载一个依赖项，直到内容进入视口或直到主线程空闲。
NgOptimizedImage：NgOptimizedImage是Angular的图像组件，它自动化了图像加载的最佳实践采用。
非破坏性水合：非破坏性水合修复了服务器端渲染的Angular应用程序的DOM在客户端重建时会发生的闪烁问题。
部分水合：Angular团队很快将发布部分水合的开发者预览版。有了部分水合，默认情况下，浏览器在页面渲染时不会加载页面的任何JavaScript。相反，页面的特定部分会在用户与页面交互时被水合。

Astro

Astro，一个现代的静态网站构建器，以其创新的Web开发方法引起了轰动。Astro专注于性能和开发者体验，发布了许多令人兴奋的特性和更新：

Astro Islands：Astro Islands允许开发者构建与页面其余部分隔离的交互式UI组件。这可以实现高效的更新和最佳性能。
混合渲染：Astro现在支持混合渲染，结合了静态站点生成和服务器端渲染的优势，提供了增强的灵活性。
图像和图片组件：Astro引入了新的图像和图片组件，简化了图像的处理并提供了自动优化。
视图转换支持：Astro提供了内置的视图转换API支持，实现平滑无缝的页面转换。
Astro开发工具栏：Astro开发工具栏为调试和优化Astro应用程序提供了强大的工具集。

React

去年，React Server Components的发布引入了React组件的新方法。从那时起，React团队一直在开发包括React编译器和服务器操作在内的多种新功能，以及：

服务器组件：React服务器组件是在服务器上获取数据并渲染的组件，然后才流式传输到客户端。这将渲染工作转移到服务器，并减少了需要传输到客户端的代码量。
React编译器：React编译器是一个编译器，可以自动记忆化组件。通过减少不必要的重新渲染，提高了性能。React团队表示，开发者可以在不进行任何代码更改的情况下采用React编译器。
服务器操作：服务器操作启用了客户端到服务器的通信。有了服务器操作，你可以定义可以直接从你的React组件调用的服务器端函数，消除了手动API调用和复杂状态管理的需要。这对于数据突变和表单提交等事情特别有用。
资源加载：React一直在开发用于预加载和加载资源（如脚本、样式、字体和图像）的声明式API。
离屏渲染：React还在开发离屏渲染。离屏渲染是React中的一个即将到来的功能，用于在不增加额外性能开销的情况下在后台渲染屏幕。你可以将其视为content-visibility CSS属性的一个版本，它不仅适用于DOM元素，也适用于React组件。

Remix

Remix，一个全栈Web框架，在开发者社区中越来越受欢迎。Remix专注于Web基础和增强的开发者体验，引入了几个值得注意的更新：

Remix 2.0发布：2023年9月发布的Remix 2.0为框架带来了重大改进和新功能。
Vite的稳定支持：Remix现在提供对Vite的稳定支持，Vite是一个快速且轻量级的构建工具，提供更快的开发构建和改进的性能。
SPA模式：Remix引入了SPA模式，允许构建纯静态站点，而无需在生产中使用JavaScript服务器。这使开发者能够使用Remix的强大功能，如基于文件的路由、自动代码分割等，同时保持静态站点部署的简单性。

Next.js

2023年5月发布的Next.js 13.4特别值得注意，因为它引入了对React Server Components、流式传输和Suspense的稳定支持。从那时起，Next.js继续构建对新React API的支持（例如，服务器操作），并通过Turbopack等计划迭代开发者体验。其他亮点包括：

App Router：在Next.js 13.4中变得稳定的App Router是Next.js应用程序中结构化和管理路由的新方式。App Router是使用新Next.js功能（如共享布局和嵌套路由）以及在Next.js应用程序中使用新React API（如React Server Components、Suspense和服务器操作）的先决条件。
Turbopack：（目前实验性）页面渲染的方法，建立在React的Suspense API之上。部分预渲染使用静态加载壳渲染页面。然而，该壳为页面内的动态内容留下了“洞”，这些内容是异步加载的。这提供了可缓存的静态页面的性能优势，同时仍能将动态数据融入页面内容。

Vue

Vue最近的发布，Vue 3.4，包括了多种性能改进。Vue还在开发Vue Vapor，这也是面向性能的。以下是这个领域的一些亮点：

Vue 3.4发布：功能包括“完全重写的解析器，速度提高了一倍，更快的SFC编译，以及重构的反应系统，提高了重新计算的效率。”
Vue Vapor模式：Vue正在开发Vapor模式，这是一种面向性能的可选编译策略，适用于Vue单文件组件。Vapor模式生成的代码比Vue编译器当前生成的代码更高效。此外，使用Vapor模式的所有组件消除了对Vue虚拟DOM的需求（这减少了捆绑包大小）。
Vue 2达到生命周期终点：Vue 2的生命周期终点（EOL）是2023年12月31日。然而，Vue 2仍然相当广泛地被使用：约50%的Vue npm包下载是针对Vue 2的。

Nuxt

Nuxt即将发布Nuxt 4。除了Nuxt在过去一年中频繁的框架发布外，Nuxt模块生态系统已经增长到近220个模块。这个领域的一些最新发展包括：

Nuxt 3.x发布：Nuxt通常每月发布新的次要版本。这些版本中的一些亮点包括对Vite 5的支持，服务器端和客户端页面，客户端Node.js支持，和原生Web流。
Nuxt Modules：Nuxt模块生态系统的亮点包括发布新的nuxt/fonts模块，以及nuxt/image和Nuxt DevTools的1.0版本发布。即将发布的模块将包括nuxt/scripts, nuxt/hints, nuxt/a11y, 和 nuxt/auth。
服务器组件（islands components）：Nuxt继续扩展对服务器组件的支持（目前是实验性的）。在Nuxt中，这些服务器渲染的组件可以在静态站点中使用——使Islands Architecture的采用成为可能。

Solid

Solid 一直在致力于SolidStart这个元框架的稳定1.0版本发布。SolidStart以其细粒度反应性、同构路由和对多种渲染模式的支持而自豪。亮点包括：

细粒度反应性：Solid的反应性系统允许精确更新和最佳性能，实现高效的渲染和状态管理。
同构路由：SolidStart提供了统一的路由方法，允许开发者定义在客户端和服务器上无缝工作的路由。
灵活的渲染模式：SolidStart支持各种渲染模式，包括服务器端渲染、静态站点生成和客户端渲染，为开发者提供了选择最佳方法的灵活性。

Svelte

在过去一年中，Svelte团队一直专注于即将发布的Svelte 5，这将是一个重大更新。其他亮点包括：

Svelte 5即将到来：除了包括一个"重写的Svelte编译器和运行时"，Svelte 5还引入了Runes的概念。
Runes宣布：Runes是Svelte 5中即将推出的一个功能。"Runes解锁了普遍的细粒度反应性...有了Runes，反应性超越了你的 .svelte 文件的界限...Svelte 5的反应性由信号驱动 - 然而，[与其他框架不同]，在Svelte 5中，信号是一个幕后实现细节，而不是你直接交互的东西。"
SvelteKit 2发布：SvelteKit是Svelte的元框架。此版本中的功能包括浅路由和对Vite 5的支持。

Chrome Aurora

Chrome Aurora是Google的一个团队，与各种开源Web框架合作，改善用户体验——特别是跨Web的性能。以下是我们在过去一年中贡献的一些倡议：

图像（next/image, NgOptimizedImage, 和 nuxt/image）
字体工具（next/font, nuxt/fonts, 和 unjs/fontaine (Vite插件)）
脚本加载（next/script 和 nuxt/scripts）
第三方脚本加载（next/third-parties, nuxt/third-parties, 和 Angular的 YouTube 和 Google Maps组件）
渲染：(Angular SSR / 水合)