Islandsアーキテクチャ：選択的ハイドレーション

Jason Millerが2020年に提唱したIslands Architectureでは、Webページを、孤立したインタラクティブな「島」が埋め込まれた大部分静的なHTMLとして扱います。HTMLの静的な海は、そのままブラウザーに送信されます。JavaScriptをダウンロードして実行するのはインタラクティブな島だけなので、JavaScriptのペイロードはページ全体のサイズではなく、実際のインタラクティブ性に比例します。

各島は、独立してハイドレーションされるコンポーネントです。サーバーは、ページの他の部分とともに島の初期HTMLをレンダリングします。島のJavaScriptが読み込まれると、そのコンポーネントのサブツリーだけがハイドレーションされます。島の周囲にあるHTMLはJavaScriptによって一切変更されず、完全に静的なままです。

Islands Architectureを使ったブログ記事ページでは、1つのいいねボタンの島に必要なJavaScriptペイロードが5kb程度になることがあります。同じページをReact SPAとして構築すると、ページ全体をハイドレーションするために200kb以上のJavaScriptを送信する場合があります。Islandsのアプローチでは、ペイロードはページのサイズではなく、インタラクティブ性に比例します。

Islands Architectureを代表するフレームワークであるAstroでは、同じページ上に異なるフレームワークで構築した島を配置できます。Reactの島、Vueの島、vanilla JavaScriptの島を隣り合わせに配置することも可能です。各島は独立してバンドルされるため、ユーザーがダウンロードするのは、表示されている島で使用されるフレームワークのコードだけです。

client:loadディレクティブは、ページの読み込み時に島をすぐにハイドレーションします。ナビゲーションメニューや、検索入力を備えたヒーローセクションなど、すぐに表示して操作できる必要がある島に使用します。これは最も優先度の高いハイドレーション戦略です。

client:idleディレクティブは、重要なコンテンツの読み込みが完了した後、ブラウザーのMainスレッドがアイドル状態になるまで待ってから島をハイドレーションします。ソーシャル共有バーなど、ページ下部にあるウィジェットや、すぐには必要にならない補助的な操作に適しています。

client:visibleディレクティブはIntersection Observerを使用し、島がビューポート内にスクロールされてきたときだけハイドレーションします。コメント欄や関連商品のカルーセルなど、ページの深い位置にあり、多くのユーザーが到達しない可能性がある島に適しています。必要になるまでJavaScriptすら読み込まれません。

client:onlyディレクティブはサーバーサイドレンダリングを完全にスキップし、ブラウザーでのみ島をレンダリングします。これは、ブラウザー専用API（window、document）を使用するコンポーネントや、マウント時にクライアント側の状態を必要とするコンポーネントに必要です。その代わり、その島にはサーバーでレンダリングされたHTMLがありません。

Islands Architectureでは、本当にインタラクティブなコンポーネントに対してのみJavaScriptを読み込んで実行することで、ページ全体のハイドレーション問題を解決します。いいねボタンがあるブログ記事では、いいねボタンの島だけがハイドレーションされ、1,200語の記事本文、ヘッダー、フッターではクライアント側のJavaScript実行が一切発生しません。

各島は独立した状態を持ちます。島は別々のReactツリーであるため、Reactの状態を直接共有できません。これは意図された設計です。2つのコンポーネントで状態を共有する必要がある場合は、1つの島にまとめるべきです。島をまたぐ通信には、URLパラメーター、DOMイベント、軽量な状態管理ライブラリを使用します。

React SPAからIslands Architectureへ移行したサイト（Astroのドキュメントサイトなど）では、大幅な改善が報告されています。JavaScriptペイロードが70〜90%減少し、モバイルでのTTIが2〜4秒改善し、Lighthouseのパフォーマンススコアが60台から90台以上に向上しています。特にコンテンツの多いページで効果が顕著です。

ビューポートにスクロールして入ったときにのみコンポーネントをハイドレーションする Astro のハイドレーションディレクティブはどれですか？

Islands Architecture では、ページの大部分を静的 HTML のままにし、分離されたインタラクティブなコンポーネントだけをハイドレーションします。Astro にはハイドレーションディレクティブとして、client:load（即時）、client:idle（アイドル状態になった後）、client:visible（スクロールして表示されたとき）、client:only（クライアントのみでレンダリング）が用意されています。それぞれのアイランドは独立してハイドレーションされるため、JavaScript の量はページのサイズではなく、インタラクティブ性に比例します。