跳转到内容

Astro 群岛

Astro 开创并推广了一种叫做 群岛 的前端架构。群岛架构通过帮助你避免单体 JavaScript 模式并自动从页面中剥离所有非必需的 JavaScript，从而实现了更好的前端性能。开发者在使用 Astro 的同时，仍然可以继续使用他们最喜欢的 UI 组件和框架，并且从中得到受益。

简史

段落标题 简史

“Etsy” 的前端架构师 Katie Sylor-Miller 在 2019 年首次创造了 “组件岛屿” 这个术语。随后，Preact 的创造者 Jason Miller 在 2020 年 8 月 11 日扩展了这个概念，并在 这篇文章 中进行了记录。

“群岛” 架构的总体思想看似简单：在服务器上渲染 HTML 页面，并在高度动态的区域周围注入占位符或插槽 […] 这些区域随后可以在客户端 “激活” 成为小型独立的小部件，重用它们服务器渲染的初始 HTML。 — Jason Miller, Preact 的创造者

这种架构模式所依赖的技术也被称为 局部化或选择性激活。

相比之下，大多数基于 JavaScript 的 Web 框架会将整个网站作为一个大型 JavaScript 应用程序（也被称为单页应用程序，或 SPA）进行激活和渲染。SPA 提供了简单性和强大的功能，但由于大量使用客户端 JavaScript 也导致存在一些页面加载的性能问题。

SPA 在 嵌入 Astro 页面内 时也有其一席之地。但是，SPA 缺乏选择性和策略性激活的原生能力，使得它们对于当今大多数 Web 项目来说是一个笨重的选择。

Astro 因为是第一个内置选择性激活的主流 JavaScript Web 框架而变得流行，它使用了由 Sylor-Miller 首次提出的组件岛屿模式。

什么是群岛？

段落标题 什么是群岛？

“Astro 群岛“指的是静态 HTML 中的交互性的 UI 组件。一个页面上可以有多个岛屿，并且每个岛屿都被独立呈现。你可以将它们想象成在一片由静态（不可交互）的 HTML 页面中的动态岛屿。

**在 Astro 中，“岛屿”指的是页面上的任何交互式 UI 组件。**你可以将岛屿想象成在一片由静态、轻量级、服务器渲染的 HTML 所构成的海洋中所漂浮的交互式小部件。

页头（可交互岛屿）
侧边栏（静态 HTML）

静态内容（比如文本、图片…）

图像轮播（可交互岛屿）
页脚（静态 HTML）

来源：群岛架构：Jason Miller

岛屿始终独立于页面上的其他岛屿运行，且一个页面上可以存在多个岛屿。尽管岛屿在不同的组件上下文中运行，它们仍然可以共享状态并相互通信。

这种灵活性使得 Astro 能够支持多个 UI 框架，如 React、Preact、Svelte、Vue 和 SolidJS。由于它们是独立的，你甚至可以在每个页面上混合使用多种框架。

创建一个岛屿

段落标题 创建一个岛屿

默认情况下，Astro 会自动将每个 UI 组件渲染成仅包含 HTML 和 CSS 的形式，并自动剥离掉所有客户端 JavaScript。

src/pages/index.astro
<MyReactComponent />

这听起来可能很严格，但正是这种做法使得 Astro 网站默认保持快速，并且避免开发者不小心发送不必要或不想要的 JavaScript，而拖慢他们的网站速度。

只需使用一个 client:* 指令，就可以将任何静态 UI 组件转变为交互式岛屿。然后 Astro 会自动构建并打包你的客户端 JavaScript，以优化性能。

src/pages/index.astro
<!-- 现在这个组件在页面上是可交互的了！
  而网站的其他部分仍然是静态。 -->
<MyReactComponent client:load />

在使用群岛时，客户端的 JavaScript 只会加载你所使用 client:* 指令明确标记的交互组件。

并且由于交互是在组件层面配置的，所有你可以根据每个组件的使用情况来处理不同的加载优先级。例如，client:idle 告诉一个组件在浏览器变为空闲时加载，而 client:visible 告诉一个组件只有在进入视口后才加载。

群岛的好处有哪些？

段落标题 群岛的好处有哪些？

Astro 群岛的最明显的好处就是性能：你网站的大部分区域都被转换为了快速、静态的 HTML，JavaScript 只为单独组件而被加载。JavaScript 是一个加载得最慢的资源。每一个字节都影响着阅读者的体验！

另一个好处是并行加载。在上面的一些假想例子中，重要性更低的图像轮播不应该阻挡更重要的页头部分的加载。这两样东西被并行加载并被分别单独组建，这表明阅读者并不需要等着更沉重的图像轮播加载完毕就可以与页头交互了。

还有更棒的：你可以准确地告诉 Astro 如何以及何时渲染每个组件。如果该图像轮播的加载成本真的很高，你可以附加一个特殊的客户端指令，告诉 Astro 仅在轮播在页面上可见时才加载它。如果用户从未看到它，它永远不会被加载。

在 Astro 中，作为开发人员，你可以明确告诉 Astro 你的页面上的哪些组件也需要在客户端浏览器中运行。Astro 只会准确地补充页面上需要交互性的内容，并将您网站的其余部分保留为静态 HTML。

群岛正是 Astro 在默认情况下能够如此迅速之秘诀！