Web 框架 Astro 2.0 发布，在静态和动态渲染之外提供了混合渲染能力

Web 框架 Astro 最近发布了 2.0 版本，在原先的静态和动态服务器渲染功能之上提供了新的混合渲染功能。混合渲染可用于渲染特定页面，以此来获得更高的渲染性能。

Astro Web 框架旨在普及一种叫作“组件岛”的前端架构，这也是 Astro 推出混合渲染的动机：

在将近一年的时间里，Astro 都只允许用户在静态（SSG）和服务器（SSR）渲染之间二选一。静态网站提供了令人难以置信的性能，但缺少为不同请求按需生成 HTML 的能力。

Astro 2.0 的混合渲染把这两种渲染能力结合在了一起。

将静态和动态内容混合在一起可以带来新的可能性：

1. 提高热度页面的渲染性能；

2. 提高大型站点的构建性能；

3. 向已有的静态站点中加入 API。

在之前的版本中，使用 Astro 的开发人员必须在静态渲染（针对静态的、内容主导的网站）或服务器端渲染之间做出选择。有了混合渲染，开发人员可以在构建时预渲染特定的页面或服务器端点，无需放弃已部署的服务器。

大型网站通常有适合使用预渲染技术生成内容的部分，也有需要在请求时生成内容的部分。例如，电子商务网站会预先渲染主页和各种以营销为重点的内容，而产品、价格或折扣页面则使用服务器端渲染，以呈现最新可用的数据。这种混合方法可能会降低渲染网页所需的计算资源量和相关的成本。

对于使用 Jamstack 的大型站点，比较有价值的是增量静态生成，这是由应用程序框架 Next.js 推广的一种渲染方式。

Astro 新版本还提供了重新设计的错误叠加，改进了对开发阶段模块热加载的支持，并使用了新发布的 Vite 4.0 来构建内容。

Astro 是一个旨在为以内容为中心的网站提升用户体验的 Web 框架。为此，Astro 尽可能少向客户端发送 JavaScript，确保页面的交互性是可用的。对于完全静态的页面，根本不发送 JavaScript。Astro 为此提出了“组件岛”架构。Web 页面被划分为静态 HTML 内容，其中穿插着称为 Astro 岛的交互式 UI 组件。组件岛是独立渲染的，可以使用任意的 UI 框架（例如，React、Preact、Svelte、Vue、Solid、Lit）。

Astro 宣称自己是“专为速度而设计的一体化 Web 框架”。其基准测试（基于 Chrome 用户体验报告[CrUX]、The HTTP Archive 和核心 Web 重要技术报告）报告显示，Astro 的性能优于其他 Web 框架（Sveltekit、Gatsby、Remix、WordPress、Next、Nuxt）。

Astro 是一个采用了 MIT 许可的开源项目。欢迎开发者参与贡献和反馈。

原文链接：

https://www.infoq.com/news/2023/04/astro-2-hybrid-rendering/

相关阅读：

Web 前端开发最好用的几个 WebGL 框架 (https://xie.infoq.cn/article/65c7f0e0e3d4a90e8d80bae35 )

Web、移动端、桌面端自动化测试工具或框架推荐 (https://xie.infoq.cn/article/f7361f9f4afc55b8f99727c3d )

Web 前端设计开发工具集（JS 框架、CSS 预处理）(https://xie.infoq.cn/article/170673a775bec8d1e407bb035 )

传统 Web 框架部署与迁移 (https://xie.infoq.cn/article/3e869b0b353cd3d810f493e27)

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

点击底部阅读原文访问 InfoQ 官网，获取更多精彩内容！