コンテンツにスキップ
Astro Astro

Astroアイランド

Astroアイランド（別名：コンポーネントアイランド）は、Astroが開拓したWebアーキテクチャーのパターンです。「アイランドアーキテクチャー」のアイデアは、2019年にEtsyのフロントエンドアーキテクトであるKatie Sylor-Millerによってはじめて作られ、Preact作者のJason Millerによってこの投稿で広められました。

Astroアイランドとは？

「Astroアイランド」とは、HTMLの静的なページ上にあるインタラクティブなUIコンポーネントを指します。1つのページに複数のアイランドが存在でき、アイランドは常に孤立して表示されます。静的で非インタラクティブなHTMLの海に浮かぶ島（アイランド）とお考えください。

ヘッダー（インタラクティブアイランド）
サイドバー（静的HTML）

テキスト、画像などの静的コンテンツ

イメージカルーセル（インタラクティブアイランド）
フッター（静的HTML）

出典：Islands Architecture: Jason Miller

Astroでは、サポートされているUIフレームワーク（React、Svelte、Vueなど）を使って、ブラウザ上でアイランドをレンダリングできます。同じページでさまざまなフレームワークを混在させることも、ただ好きなものを選ぶこともできます。

このアーキテクチャパターンは、パーシャルハイドレーションまたは選択的ハイドレーションとして知られている技術に基づいています。Astroはこの技術を裏側で活用し、アイランドを自動的に動かします。

Astroでアイランドはどのように機能しますか？

Astroは、デフォルトでクライアントサイドのJavaScriptを一切使用せずにすべてのウェブサイトを生成します。 React、Preact、Svelte、Vue、SolidJS、AlpineJS、またはLitで作られたフロントエンドUIコンポーネントを使うと、Astroが自動的に前もってHTMLとして生成し、すべてのJavaScriptを取り除いてから、それを表示します。このように、ページ内の未使用のJavaScriptをすべて削除することで、すべてのサイトをデフォルトで高速に保つことができます。

src/pages/index.astro
---
// 例：JavaScriptを使用せず、ページ上で静的なReactコンポーネントを使用します。
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- 100%HTMLで、ページ上に読み込まれるJavaScriptはゼロ！ -->
<MyReactComponent />

しかし、インタラクティブなUIを作成するためには、クライアントサイドのJavaScriptが必要になります。Astroでは、ページ全体をSPAのようなJavaScriptアプリケーションにするのではなく、アイランドを作成します。

src/pages/index.astro
---
// 例：ページ上で動的なReactコンポーネントを使用します。
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- このコンポーネントは、ページ上でインタラクティブに動作するようになります！
     残りの部分は静的でJSゼロのままです。 -->
<MyReactComponent client:load />

Astroアイランドにより、サイトの大部分は純粋で軽量なHTMLとCSSのままです。上の例では、ページの残りの部分を変更することなく、単一の独立したインタラクティブなアイランドを追加しただけです。

アイランドの利点は何ですか？

Astroアイランドで構築するもっとも明白な利点は、パフォーマンスです。ウェブサイトの大部分は高速で静的なHTMLに変換され、JavaScriptは、それを必要とする個々のコンポーネントにのみ読み込まれます。JavaScriptは、バイト単位で読み込むことができるもっとも遅いリソースの1つなので、1バイトが重要なのです。

もうひとつのメリットは、並列ロードです。上のイラストの例では、優先度の低い「画像カルーセル」のアイランドが、優先度の高い「ヘッダー」のアイランドをブロックする必要はないのです。この2つは並行してロードされ、独立してハイドレーションされます。つまり、ヘッダーは、ページ下部の重いカルーセルを待つことなく、すぐにインタラクティブな状態になります。

さらに、各コンポーネントのレンダリング方法とタイミングをAstroに正確に指示できます。画像カルーセルの読み込みコストが非常に高い場合は、特別なclientディレクティブ (EN)を付けて、カルーセルが画面上で見えるようになったときだけ読み込むようにAstroに指示できます。ユーザーがそこまでスクロールしなければ、ロードされることはありません。

Astroでは、ページ上のどのコンポーネントがブラウザで実行される必要があるか、Astroに明示的に伝えるのは、開発者の仕事です。Astroは、ページ上で必要なものだけを正確にハイドレーションし、サイトの残りの部分は静的なHTMLとして残します。

Astroのデフォルトで高速なパフォーマンスの秘密は、アイランドにあります。