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 默認快速性能故事的祕密！