Astroアイランド

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

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

ヘッダー(インタラクティブアイランド)

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

出典:Islands Architecture: Jason Miller

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

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

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

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

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

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

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

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

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

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

Section titled アイランドの利点は何ですか?

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

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

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

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

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