Astro 群岛

Astro 开创并推广了一种名为 Islands 的前端架构。Islands 架构通过帮助你避免单片 JavaScript 模式并自动从页面中删除所有非必要的 JavaScript，可实现更好的前端性能。开发者继续将他们最喜欢的 UI 组件和框架与 Astro 结合使用，并且仍然可以获得这些好处。

¥Astro pioneered and popularized a frontend architecture called Islands. Islands architecture results in better frontend performance by helping you avoid monolithic JavaScript patterns and stripping all non-essential JavaScript from the page automatically. Developers keep using their favorite UI components and frameworks with Astro and still get these benefits.

简短的历史

Section titled 简短的历史

¥A brief history

“组件岛” 一词最初由 Etsy 的前端架构师 Katie Sylor-Miller 于 2019 年创造。随后 Preact 创建者 Jason Miller 于 2020 年 8 月 11 日在 这个帖子 中扩展并记录了这个想法。

¥The term “component island” was first coined by Etsy’s frontend architect Katie Sylor-Miller in 2019. This idea was then expanded on and documented in this post by Preact creator Jason Miller on August 11, 2020.

“群岛” 架构的总体思路看似简单：在服务器上渲染 HTML 页面，并在高度动态的区域周围注入占位符或插槽 […] 然后可以在客户端上将其 “hydrated” 到小型自包含的小部件中，重用其服务器渲染的初始 HTML。— Jason Miller，Preact 的创建者

¥The general idea of an “Islands” architecture is deceptively simple: render HTML pages on the server, and inject placeholders or slots around highly dynamic regions […] that can then be “hydrated” on the client into small self-contained widgets, reusing their server-rendered initial HTML.\ — Jason Miller, Creator of Preact

此架构模式所基于的技术也称为部分或选择性水合。

¥The technique that this architectural pattern builds on is also known as partial or selective hydration.

相比之下，大多数基于 JavaScript 的 Web 框架将整个网站合并并渲染为一个大型 JavaScript 应用（也称为单页应用或 SPA）。SPA 提供简单性和功能，但由于客户端 JavaScript 的大量使用而存在页面加载性能问题。

¥In contrast, most JavaScript-based web frameworks hydrate & render an entire website as one large JavaScript application (also known as a single-page application, or SPA). SPAs provide simplicity and power but suffer from page-load performance problems due to heavy client-side JavaScript usage.

SPA 有其一席之地，甚至是 嵌入 Astro 页面内。但是，SPA 缺乏选择性和战略性水合的原生能力，这使得它们成为当今网络上大多数项目的严厉选择。

¥SPAs have their place, even embedded inside an Astro page. But, SPAs lack the native ability to selectively and strategically hydrate, making them a heavy-handed choice for most projects on the web today.

Astro 作为第一个内置选择性水合作用的主流 JavaScript Web 框架而广受欢迎，它使用了 Sylor-Miller 首次创造的组件岛模式。

¥Astro became popular as the first mainstream JavaScript web framework with selective hydration built-in, using that component islands pattern first coined by Sylor-Miller.

什么是群岛？

Section titled 什么是群岛？

¥What is an island?

在 Astro 中，“island” 指的是页面上的任何交互式 UI 组件。将群岛视为漂浮在静态、轻量级、服务器渲染 HTML 海洋中的交互式小部件。

¥In Astro, an “island” refers to any interactive UI component on the page. Think of an island as an interactive widget floating in a sea of otherwise static, lightweight, server-rendered HTML.

Header (interactive island)

Sidebar (static HTML)

静态内容，如文本、图片等。

¥Static content like text, images, etc.

Image carousel (interactive island)

Footer (static HTML)

Source: Islands Architecture: Jason Miller

一个孤岛始终与页面上的其他孤岛隔离运行，并且一个页面上可以存在多个孤岛。即使孤岛运行在不同的组件上下文中，它们仍然可以共享状态并相互通信。

¥An island always runs in isolation from other islands on the page, and multiple islands can exist on a page. Islands can still share state and communicate with each other, even though they run in different component contexts.

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

¥This flexibility allows Astro to support multiple UI frameworks like React, Preact, Svelte, Vue, and SolidJS. Because they are independent, you can even mix several frameworks on each page.

Tip

Although most developers will stick to just one UI framework, Astro supports multiple frameworks in the same project. This allows you to:

• Choose the framework that is best for each component.
• Learn a new framework without needing to start a new project.
• Collaborate with others even when working in different frameworks.
• Incrementally convert an existing site to another framework with no downtime.

创建群岛

Section titled 创建群岛

¥Creating an island

默认情况下，Astro 会自动将每个 UI 组件渲染为 HTML 和 CSS，自动删除所有客户端 JavaScript。

¥By default, Astro will automatically render every UI component to just HTML & CSS, stripping out all client-side JavaScript automatically.

src/pages/index.astro

<MyReactComponent />

这听起来可能很严格，但这种行为默认情况下可以保持 Astro 网站的快速运行，并防止开发者意外发送不必要或不需要的 JavaScript，从而降低其网站速度。

¥This may sound strict, but this behavior is what keeps Astro websites fast by default and protects developers from accidentally sending unnecessary or unwanted JavaScript that might slow down their website.

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

¥Turning any static UI component into an interactive island requires only a client:* directive. Astro then automatically builds and bundles your client-side JavaScript for optimized performance.

src/pages/index.astro

<!-- This component is now interactive on the page!
     The rest of your website remains static. -->
<MyReactComponent client:load />

对于孤岛，仅为使用 client:* 指令标记的显式交互组件加载客户端 JavaScript。

¥With islands, client-side JavaScript is only loaded for the explicit interactive components that you mark using client:* directives.

而且由于交互是在组件级别配置的，因此你可以根据每个组件的使用情况处理不同的加载优先级。例如，client:idle 告诉组件在浏览器空闲时加载，而 client:visible 告诉组件仅在进入视口时加载。

¥And because interaction is configured at the component-level, you can handle different loading priorities for each component based on its usage. For example, client:idle tells a component to load when the browser becomes idle, and client:visible tells a component to load only once it enters the viewport.

群岛有什么好处？

Section titled 群岛有什么好处？

¥What are the benefits of Islands?

使用 Astro 群岛构建的最明显的好处是性能：你网站的大部分内容都会转换为快速、静态的 HTML，并且仅为需要它的各个组件加载 JavaScript。JavaScript 是按字节加载最慢的资源之一，因此每个字节都很重要。

¥The most obvious benefit of building with Astro Islands is performance: the majority of your website is converted to fast, static HTML and JavaScript is only loaded for the individual components that need it. JavaScript is one of the slowest assets that you can load per-byte, so every byte counts.

另一个好处是并行加载。在上面的示例图中，低优先级 “图片轮播” 岛不需要阻挡高优先级 “header” 岛。两者并行加载并独立进行水合，这意味着标题立即变得可交互，而无需等待页面下方较重的轮播。

¥Another benefit is parallel loading. In the example illustration above, the low-priority “image carousel” island doesn’t need to block the high-priority “header” island. The two load in parallel and hydrate in isolation, meaning that the header becomes interactive immediately without having to wait for the heavier carousel lower down the page.

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

¥Even better, you can tell Astro exactly how and when to render each component. If that image carousel is really expensive to load, you can attach a special client directive that tells Astro to only load the carousel when it becomes visible on the page. If the user never sees it, it never loads.

在 Astro 中，作为开发者，你需要明确告诉 Astro 页面上的哪些组件也需要在浏览器中运行。Astro 只会水化页面上所需的内容，并将网站的其余部分保留为静态 HTML。

¥In Astro, it’s up to you as the developer to explicitly tell Astro which components on the page need to also run in the browser. Astro will only hydrate exactly what’s needed on the page and leave the rest of your site as static HTML.

群岛是 Astro 快速默认表演故事的秘密！

¥Islands are the secret to Astro’s fast-by-default performance story!