アイランドアーキテクチャ(Islands Architecture)は、ページの大部分を静的なHTMLで返し、対話が必要な部分だけを「島(island)」として切り出して、その島の分だけJavaScriptを読み込む(ハイドレートする)設計の考え方です。Astro が代表的に採用しており、Astroの看板となる仕組みとして語られます。
まず押さえたいポイント
- 土台は静的HTMLのまま返し、動く部品だけを島にする
- SPA の全ページハイドレーションと違い、ブラウザに送るJSを島の分だけに抑えられる
- 島をいつ動かすかを
client:load/client:idle/client:visibleなどで制御できる - 島の中身は React・Vue・Svelte・Solid など好きなUIフレームワークで書け、混在も可能
どんな場面で使うか
ブログ・ドキュメント・LP・コーポレートサイトなど、大部分が静的で、動く部分が限られるページで特に効きます。記事本文は静的HTMLのまま、検索ボックスやコメント欄だけを島にすれば、島以外にはJSが届かず、ページが軽くなります。client:visible を使えば、画面に入るまでその島のJSを読み込まない、といった遅延もコンポーネント単位でできます。
よくある誤解や注意点
「島を増やすほど速くなる」は誤解です。島は動かすためにJSを読み込むので、島(特に client:load)を増やしすぎると逆に重くなります。速さの源は「島を最小限にし、残りを静的HTMLで返す」点にあります。また、島は独立して動くため、島をまたいだ状態共有にはひと工夫が要ります。なお client:* はブラウザで動かす島、Astro 5以降の Server Islands(server:defer)はサーバーで生成して差し込む島で、役割が異なります。詳しくは アイランドアーキテクチャ（Astro Islands）とは？ で整理しています。