Astro Islands静态页面交互式UI组件

Astro Islands

Astro Islands代表了前端Web架构的领先范式转变。Astro 将您的 UI 提取到页面上较小的独立组件中。未使用的JavaScript被轻量级HTML取代，保证更快的加载和交互时间（TTI）。

术语“Astro Island”是指HTML的静态页面上的交互式UI组件。一个页面上可以存在多个孤岛，并且一个孤岛始终单独呈现。将它们视为静态、非交互式 HTML 海洋中的岛屿。

在 Astro 中，您可以使用任何受支持的 UI 框架（React、Svelte、Vue 等）在浏览器中渲染孤岛。您可以在同一页面上混合和匹配不同的框架，或者只是选择您喜欢的框架。

这种架构模式所基于的技术称为部分或选择性水合作用。Astro在幕后利用这种技术，自动为您的岛屿提供动力。

运作流程

默认情况下，Astro 使用零客户端 JavaScript 生成每个网站。使用使用 React、Preact、Svelte、Vue、SolidJS、AlpineJS或 Lit构建的前端 UI 组件，Astro 会自动提前将其渲染为 HTML，然后删除所有 JavaScript。 默认情况下，这通过从页面中删除所有未使用的 JavaScript 来保持每个站点的快速。

---
// Example: Use a static React component on the page, without JavaScript.
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- 100% HTML, Zero JavaScript loaded on the page! -->
<MyReactComponent />

但有时，创建交互式 UI 需要客户端 JavaScript。Astro 不会强迫您的整个页面成为类似 SPA 的 JavaScript 应用程序，而是要求您创建一个孤岛。

---
// Example: Use a dynamic React component on the page.
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- This component is now interactive on the page! 
     The rest of your website remains static and zero JS. -->
<MyReactComponent client:load />

使用Astro Islands，您网站的绝大多数内容仍然是纯的，轻量级的HTML和CSS。在上面的示例中，您刚刚添加了一个孤立的交互性孤岛，而没有更改页面的其余部分。

优点

使用Astro Islands构建最明显的好处是性能：您的大部分网站都转换为快速，静态的HTML，并且JavaScript仅针对需要它的单个组件加载。JavaScript 是每字节加载的最慢的资产之一，因此每个字节都很重要。

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

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

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

以上就是Astro Islands静态页面交互式UI组件的详细内容，更多关于Astro Islands静态页面交互的资料请关注脚本之家其它相关文章！