跳转到内容
Astro Astro

Astro Islands

Astro Islands（也就是 Component Islands）是一個由 Astro 開創的網頁架構的形式。“Islands 架構” 一開始由 Etsy 的前端架構師 Katie Sylor-Miller 於 2019 創造，並由 Preact 創造者 Jason Miller 在這篇文章所延伸。

什麼是 Astro Island？

“Astro Island” 指的就是靜態網頁 HTML 中一個可互動的 UI component。多個 island 可以在同個頁面下共存，且每個 island 總是獨自渲染。想像一下他們就像是坐落在靜態且非互動 HTML 海面上的島嶼們。

頁首（互動式的 island）
側邊欄（靜態的 HTML）

像是文字和圖片等等的靜態內容。

圖片輪播（互動式的 island）
頁尾（靜態的 HTML）

來源：Islands 架構：Jason Miller

在 Astro 中，你可以用任何被支援的 UI 框架（React, Svelte, Vue 等等）來渲染瀏覽器上的 islands。你也能在同個頁面上混合並配合不同框架或只挑你喜歡的框架來使用。

這樣架構形式的技術也就是 部分 或 選擇性的 hydration。Astro 就是藉此之便在背後自動驅動你的 islands。

Islands 在 Astro 如何運作？

預設上，Astro 每次都生成零客戶端 JavaScript 的網站。 當你以 React, Preact, Svelte, Vue, SolidJS, AlpineJS 或 Lit 來建立前端 UI component 時，Astro 會在第一時間自動渲染成 HTML 並清除掉所有的 JavaScript。將所有沒用到的 JavaScript 從網頁上移除也就讓每個網站的讀取在預設上就很迅速。

src/pages/index.astro
---
// 範例：不用 JavaScript 的情況下，在網頁使用一個靜態的 React component。
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- 100% 純 HTML、零 JavaScript 在網頁上載入！ -->
<MyReactComponent />

但有時候，在創造互動式 UI 時是需要客戶端 JavaScript 的。Astro 會請你建立一個 island 而非強制讓你的所有網頁變成一個像 SPA 的 JavaScript 應用程式。

src/pages/index.astro
---
// 範例：在網頁使用一個動態的 React component。
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- 現在這個 component 可以在這頁面上互動了！
     你網站剩下的部分依然是靜態的且零 JavaScript。 -->
<MyReactComponent client:load />

在使用 Astro Islands 下，你網站絕大部分都是純粹、輕量的 HTML 和 CSS。如上方的例子所示，你不用改變所有網頁只要加上單個局部的 互動式 island 就有互動式的 UI 可用。

Islands 的優勢是什麼？

使用 Astro Islands 來建立網站最顯著的優勢就是效能：你網站大部分都會轉換成快速、靜態的 HTML，而 JavaScript 只會在個別所需的 component 中載入。JavaScript 是其中一個你載入每個 Byte 中最慢的資源，所以每個 Byte 都要斤斤計較。

另一個優勢是平行載入。如上面的例子所闡釋，低優先度的 “圖片輪播” 不需要阻擋到高優先度的 “頁首” island。兩個平行載入且獨立 hydrate 也就表示頁首可以立即互動而不用等待較肥大的圖片輪播拖慢整個網頁。

更讚的是，你可以確實告訴 Astro 如何和何時去渲染各個 component。如果載入圖片輪播的成本較高，你可以附加一個特殊的客戶端指令 (EN)，其告訴 Astro 只當輪播在頁面上可見時才會載入，如果使用者不會看到那就不會載入。

在 Astro 中，作為一個開發人員，你可以明確告訴 Astro 頁面上的哪些 component 需要在瀏覽器上執行。Astro 只會確實 hydrate 頁面所需，並讓你剩下的網站保持靜態的 HTML。

Islands 就是 Astro 擁有預設即迅速的效能表現的秘密武器！