先に要点
- アイランドアーキテクチャ(Islands Architecture)は、ページの大部分を静的なHTMLで返し、対話が必要な部分だけを「島(island)」として切り出して、そこだけJavaScriptを読み込む(ハイドレートする)設計です。Astro の看板となる考え方です。
- 従来の SPA や全ページハイドレーションは、静的で十分な部分にまで大量のJSを配って初期表示を重くしがち。アイランドは「動かす所だけ」に限定してブラウザに送るJSを劇的に減らします。
- どの島を・いつ動かすかは
client:*ディレクティブで指定します。client:visibleなら画面に入ったときだけ読み込む、といった細かい制御ができます。 - 島の中身は React・Vue・Svelte・Solid など好きなUIフレームワークで書け、混在もできます。島どうしは独立してハイドレートします。
- Astro 5以降の Server Islands(
server:defer)を使うと、静的な土台を止めずに、個別化・動的な部分だけサーバー側で後から差し込めます。速さと動的さを両立できます。
静的サイトは速いけど、検索ボックスやカートみたいな“動く部分”はどうするの？ ── この問いにAstroが出した答えがアイランドアーキテクチャです。ページを全部JavaScriptで動かすのでも、全部ただの静的HTMLにするのでもなく、「静的なHTMLの海に、動くコンポーネントの島を点在させる」という発想です。
この記事では、アイランドアーキテクチャが何を解決する仕組みなのか、従来のやり方との違い、client:* ディレクティブの使い分け、Server Islands まで整理します。Astro全体の位置づけはAstroとは？で扱っています。
そもそも何を解決したいのか
React などで作る一般的な SPA は、たとえ中身がほぼ読み物のページでも、ページ全体を動かすためのJavaScriptをまとめてブラウザに送り、読み込んでから“いきいき”させる(ハイドレーション)のが基本でした。これは、記事やLPのような本来は静的で十分なページにまで、重いJSを配ってしまうという無駄を生みます。初期表示が遅くなり、Core Web Vitalsにも響きます。
アイランドアーキテクチャは、この「全部動かす前提」をやめます。ページの土台は静的HTMLのまま返し、動きが必要な部品だけを独立した島として切り出して、その島の分のJSだけを読み込む。これがコアの発想です。
静的な海に、動く島を置く
たとえばブログ記事なら、記事本文は静的HTML、右上の「検索」と末尾の「コメント投稿」だけが島、という形になります。島以外の場所にはJSが一切届かないので、ページはとても軽くなります。Astro公式やベンチマークでも、同等のドキュメントサイトでNext.jsが数百KBのJSを送るのに対し、Astroは数KB台に収まるといった差が示されています(構成により変わります)。
いつ動かすか：client: ディレクティブ
島を「作るか」だけでなく「いつハイドレートするか」も選べるのが、アイランドアーキテクチャの効きどころです。Astroでは client:* ディレクティブで指定します。
client:load
ページ読み込み時にすぐハイドレート。最初から動いていてほしい重要な部品向け。
client:idle
ブラウザが手すきになったらハイドレート。急がない部品を後回しにして初期表示を優先。
client:visible
画面に入ってきたらハイドレート。ページ下部のウィジェットなど、見えるまで読み込まないので特に軽い。
client:media / client:only
client:mediaは特定の画面幅などの条件が合ったときだけ。client:onlyはサーバー描画をせずクライアントだけで描く指定。
ポイントは、「必要になるまでJSを動かさない(遅延させる)」判断をコンポーネント単位でできること。client:visible をうまく使うと、最初に読み込むJSをぐっと抑えられます。
島の中身は好きなフレームワークでよい
アイランドは特定のUIフレームワークに縛られません。1つの島は React、別の島は Vue や Svelte、Solid、Preact といったように、島ごとに別のフレームワークを混在させることも可能です。各島は独立してハイドレートするため、片方の島が重くても他の島やページ全体を巻き込みません。
これは、既存のReactコンポーネント資産を活かしつつ、ページ全体はAstroで軽く保つ、といった現実的な移行にも向いています。
Server Islands：静的の速さと、動的の両立
「大部分は静的でいいが、ログインユーザー名やおすすめ商品のような一部だけは毎回サーバーで出したい」という要求はよくあります。ここで Astro 5以降の Server Islands(server:defer)が効きます。
Server Islandsの考え方
クライアント側の client:*(ブラウザで動かす島)と、サーバー側の server:defer(サーバーで作る島)は役割が別物です。前者は対話性、後者は動的な生成のための仕組み、と整理すると混乱しません。
従来のハイドレーションとの違い
| 観点 | 全ページハイドレーション(従来のSPA) | アイランドアーキテクチャ |
|---|---|---|
| JSを送る範囲 | ページ全体 | 島(動く部品)だけ |
| 初期表示のJS量 | 大きくなりがち | 小さく保てる |
| ハイドレートの単位 | ページ丸ごと | 島ごとに独立 |
| 読み込みの遅延 | 基本まとめて | island単位で遅延指定できる |
| 向くページ | アプリのように全体が動く画面 | 大部分が静的なコンテンツ中心のページ |
なお、Next.jsの React Server Components も「サーバーで描いてJSを減らす」方向の技術ですが、アイランドは“静的HTML＋部分的な島”を出発点にする点で発想が異なります。Astroとの比較は別記事で詳しく扱う予定です。
向く場面と、限界
よく効く
ブログ・ドキュメント・LP・コーポレートサイトなど、大部分が静的で、動く部分が限られるページ。JS削減の効果が大きい。
恩恵が小さい
管理画面やSaaSのようにほぼ全体が対話的な画面。島だらけになるなら、アプリ向けフレームワークの方が素直なことも。
設計の勘所
「どこを島にし、どこを静的のまま残すか」の線引きが実務の肝。安易に何でも client:load にすると利点が薄れる。
島どうしの連携
島は独立して動くため、島をまたいだ状態共有はひと工夫要る(共有ストアやイベントなど)。全部を1つの巨大な状態で回す作りには向かない。
アイランドアーキテクチャに関するよくある質問
アイランドアーキテクチャとハイドレーションの違いは何ですか？
ハイドレーションは「サーバーが返したHTMLに、JavaScriptを結びつけて動くようにする」処理そのものを指します。アイランドアーキテクチャは、そのハイドレーションを“動く部品(島)だけ”に限定する設計です。従来は主にページ全体をハイドレートしていましたが、アイランドは島単位に絞ることでJS量を減らします。
client:load と client:visible はどう使い分けますか？
最初から動いていてほしい重要な部品は client:load、見えるまで動かなくてよい部品は client:visible が基本です。ページ下部のコメント欄やカルーセルなどを client:visible にすると、初期に読み込むJSを大きく減らせます。
アイランドアーキテクチャはAstro専用ですか？
考え方自体は特定のツール専用ではありませんが、Astroが最も代表的に採用しているため、実務では「Astroの仕組み」として語られることが多いです。島の中身に React / Vue / Svelte / Solid などを使える点もAstroの特徴です。
島を増やすほど速くなりますか？
いいえ。島は動かすためにJSを読み込むので、島(特に client:load)を増やしすぎるとJSが増えて逆効果です。速さの源は「島を最小限にし、残りを静的HTMLのまま返す」ことにあります。何でも島にしないのがコツです。
Server Islands と client のディレクティブは何が違いますか？
client:* はブラウザで動かす島(対話性)のための指定、server:defer の Server Islands はサーバーで生成して差し込む島(動的な生成)のための仕組みです。前者はボタンやフォーム、後者はログイン名やおすすめ表示のような個別化に向きます。
まとめ
アイランドアーキテクチャは、ページの大部分を静的HTMLで返し、対話が必要な部分だけを島として切り出して、その分だけJavaScriptを読み込む設計です。全部を動かす従来のSPAに比べ、ブラウザに送るJSを大幅に減らせるのが最大の利点で、client:load / idle / visible などでいつ動かすかまで細かく制御できます。島の中身は好きなUIフレームワークで書け、Astro 5以降の Server Islands を使えば静的の速さと動的な生成を同じページで両立できます。効果が大きいのは大部分が静的なコンテンツ中心のページで、「どこを島にするか」の線引きが設計の肝になります。Astro全体像はAstroとは？もあわせてどうぞ。
参考リンク
- 関連記事: Astroとは？ / Core Web Vitals改善の実務 / Qwikとは(Resumability)
- 用語集: アイランドアーキテクチャ / Astro / SPA / SSR
- 公式: Astro Docs: Islands architecture