Astro 2.0 发布：引入混合渲染功能

HTML优先的Web框架Astro最近发布了Astro 2.0，并引入了混合渲染功能，补充了之前可用的静态和动态服务器渲染。混合渲染允许预渲染特定页面，以提高性能。

混合渲染的动机

Astro框架旨在推广一种称为岛屿架构的前端架构。Astro解释了引入混合渲染的动机：

• 静态网站（SSG）在性能上表现出色，但无法为每个请求动态生成HTML。
• 服务器渲染（SSR）可以实现动态生成，但牺牲了部分性能。

• Astro 2.0通过混合渲染结合了静态和动态渲染的优点，解锁了新的可能性：

  • 提高热门页面的渲染性能。
  • 提升大型站点的构建性能。
  • 在现有的静态站点中添加API。

混合渲染的应用场景

在之前的版本中，开发者需要在静态渲染（适用于内容为主的静态站点）和服务器渲染之间做出选择。而混合渲染允许开发者在构建时预渲染特定页面或服务器端点，同时保留部署的服务器。

大型站点通常包含适合预渲染的部分，而其他部分则需要根据请求生成内容。例如，电子商务站点可以预渲染主页和营销内容，而产品、价格或折扣页面则可以继续使用服务器渲染，以确保数据的实时性。这种混合方法可以减少交付网页所需的计算资源，从而降低相关成本。

其他优化

在Jamstack环境中，其他对大型站点有价值的优化包括Next.js推广的增量静态再生（ISR）。

新版本的其他改进

Astro 2.0还包括以下改进：

• 重新设计的错误覆盖层。
• 改进开发中的热模块重载支持。
• 使用新发布的Vite 4.0构建内容。

Astro的设计理念

Astro是一个主要关注内容型网站用户体验的Web框架。为了实现这一目标，Astro致力于发送最少的JavaScript，以确保页面的交互性。对于完全静态的页面，完全不发送JavaScript。Astro称其使用的架构为岛屿架构，网页可以看作是静态HTML内容与交互式UI组件（称为Astro岛屿）的混合体。这些岛屿可以独立渲染，并可以使用任何UI框架（如React、Preact、Svelte、Vue、Solid、Lit）。

性能表现

Astro自称为“为速度而设计的一体化Web框架”。根据其基于实际性能数据的基准测试（包括Chrome用户体验报告、HTTP档案和Core Web Vitals技术报告），Astro在性能上通常优于其他一些Web框架（如SvelteKit、Gatsby、Remix、WordPress、Next、Nuxt）。

开源与贡献

Astro是一个在MIT许可证下分发的开源项目，欢迎贡献和反馈。