Astro Islands

程序员 · 2024-10-2 08:37:34

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';---<MyReactComponent />但偶尔，创建交互式 UI 必要客户端 JavaScript。Astro 不会逼迫您的整个页面成为雷同 SPA 的 JavaScript 应用步伐，而是要求您创建一个孤岛。
---// Example: Use a dynamic React component on the page.import MyReactComponent from '../components/MyReactComponent.jsx';---<MyReactComponent client:load />使用Astro Islands，您网站的绝大多数内容仍然是纯的，轻量级的HTML和CSS。在上面的示例中，您刚刚添加了一个孤立的交互性孤岛，而没有更改页面的别的部门。
长处

使用Astro Islands构建最显着的利益是性能：您的大部门网站都转换为快速，静态的HTML，而且JavaScript仅针对必要它的单个组件加载。JavaScript 是每字节加载的最慢的资产之一，因此每个字节都很告急。
另一个利益是并行加载。在上面的示例图中，低优先级的“图片轮播”岛不必要制止高优先级的“标头”岛。两者并行加载并隔离补水，这意味着标题立即变得交互，而无需等候页面下方较重的轮播。
更好的是，您可以正确地告诉 Astro 怎样以及何时渲染每个组件。假如该图像轮播的加载本钱确实很高，您可以附加一个特别的客户端指令，告诉 Astro 仅在轮播在页面上可见时才加载轮播。假如用户从未看到它，则永久不会加载。
在 Astro 中，作为开发职员，您可以明确告诉 Astro 页面上的哪些组件也必要在欣赏器中运行。Astro 只会将页面上必要的内容完全水化，并将您网站的别的部门生存为静态 HTML。
岛屿是 Astro 默认快速性能故事的秘密！

Astro Islands

所属分类: 问答交流

新帖推荐: 30日

推荐作品