Astroアイランド

Astroは、アイランド（Islands）と呼ばれるフロントエンドアーキテクチャを開拓し、普及させました。アイランドアーキテクチャは、モノリシックなJavaScriptのパターンを避け、ページから不要なJavaScriptをすべて自動的に削除することで、フロントエンドのパフォーマンスを向上させます。開発者は、Astroと一緒にお気に入りのUIコンポーネントやフレームワークを使い続けながらも、なおこうしたメリットを得られます。

簡単な歴史

「コンポーネントアイランド」という用語は、EtsyのフロントエンドアーキテクトであるKatie Sylor-Millerによって2019年に作られました。その後このアイデアは拡張され、Preactの作者であるJason Millerによる2020年8月11日のこの記事によって文書化されました。

「アイランド」アーキテクチャの基本的な考え方は驚くほどシンプルです。サーバーでHTMLページをレンダリングし、高度に動的な領域にはプレースホルダーやスロットを挿入しておきます。そしてクライアント上では、サーバーでレンダリングされたHTMLを再利用して、その領域に小さな自己完結型のウィジェットを「ハイドレーション」します。
— Jason Miller、Preactの作者

このアーキテクチャパターンがベースとしている技術は、パーシャル（partial）ハイドレーションや選択的（selective）ハイドレーションとしても知られています。

対照的に、JavaScriptベースのウェブフレームワークの多くは、1つの大きなJavaScriptアプリケーション（シングルページアプリケーション、SPAとも呼ばれます）として、ウェブサイト全体をハイドレーションしてレンダリングします。SPAはシンプルでパワフルですが、クライアントサイドのJavaScriptが増えるため、ページロードパフォーマンスの問題に悩まされることになります。

SPAは特定の状況においては有用であり、Astroページの中に埋め込むこともできます。しかし、SPAには、選択的かつ戦略的にハイドレーションするためのネイティブな機能がないため、現在ウェブ上にある多くのプロジェクトにとっては過剰な選択肢となってしまいます。

Astroは、Sylor-Millerが作り出したコンポーネントアイランドパターンを使い、選択的ハイドレーションを組み込んだ最初のメインストリームのJavaScriptウェブフレームワークとして人気となりました。

Astroアイランドとは？

Astroにおける「アイランド」とは、ページ上のインタラクティブなUIコンポーネントを指します。 アイランドとは、サーバーでレンダリングされた静的で軽量なHTMLの海に浮かぶ、インタラクティブなウィジェットのことだと考えてください。

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

画像カルーセル（インタラクティブアイランド）

出典：Islands Architecture: Jason Miller

各アイランドは常にページ上の他のアイランドから独立して動作します。ページ上に複数のアイランドを存在させることもできます。またアイランドは、それぞれ異なるコンポーネントコンテキストで実行されているにもかかわらず、状態を共有したり、互いに通信することが可能です。

この柔軟性により、Astroは、React、Preact、Svelte、Vue、SolidJSなどの複数のUIフレームワークをサポートしています。それぞれが独立しているため、1つのページで複数のフレームワークを混在させることすら可能です。

アイランドを作成する

デフォルトでは、AstroはすべてのUIコンポーネントをHTMLとCSSのみへと自動的にレンダリングし、クライアントサイドのJavaScriptを自動的に取り除きます。

<MyReactComponent />

これは厳しく聞こえるかもしれませんが、この挙動により、Astroウェブサイトはデフォルトで高速となり、またウェブサイトのパフォーマンスを低下させる可能性のある不要なJavaScriptを開発者が誤って送信することを防ぎます。

静的なUIコンポーネントをインタラクティブなアイランドに変換するには、client:*ディレクティブを追加します。これによりAstroは、パフォーマンスの最適化のために、クライアントサイドのJavaScriptを自動的にビルドしてバンドルします。

<!-- このコンポーネントは、ページ上でインタラクティブになります！
     ウェブサイトの残りの部分は静的なままです。 -->
<MyReactComponent client:load />

アイランドでは、クライアントサイドのJavaScriptは、client:*ディレクティブを使って明示的にマークしたインタラクティブなコンポーネントに対してのみ読み込まれます。

また、インタラクティブにするかどうかはコンポーネント単位で設定されるため、各コンポーネントの使用状況に応じて読み込む優先度をそれぞれ指定できます。たとえば、client:idleは、ブラウザがアイドル状態になったときにコンポーネントをロードするように指示し、client:visibleは、コンポーネントがビューポートに入ったとき初めてロードするように指示します。

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

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

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

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

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

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

GitHub Issueを作成

フィードバックを送信