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 框架

Web、移动端、桌面端自动化测试工具或框架推荐

Web 前端设计开发工具集（JS 框架、CSS 预处理）

传统 Web 框架部署与迁移