ひとことで言うと
Island Architectureとは、ページの大部分を静的なHTMLとして配信し、インタラクティブな機能が必要な「島（Island）」の部分だけJavaScriptを読み込む設計パターンだ。Astroが先導し、現在はNext.js App RouterやFreshなど多くのフレームワークで採用されている。
具体的には、ヘッダー・本文・フッターは純粋なHTMLとして配信し、検索ボックスや動的カートといったUI部品だけJSを付与する。これにより初期表示が高速になり、Hydrationのコストも最小限に抑えられる。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
HTML共有で関係する場面
Astroで出力したサイトをzipで共有すると、Island部分のJSだけが`dist/_astro/`フォルダに格納されている。このフォルダを含めずにHTMLファイルだけ送ると、静的コンテンツは表示されるがインタラクティブな部品（タブ、スライダーなど）が動かない。zip前に`dist/`フォルダ全体を選択することが必須だ。
Island Architectureのページは静的HTMLとJSが分離しているため、ギガサイト便のようなサービスでフォルダごとアップロードすれば、受け取った側がURLを開くだけで静的部分の表示を即確認でき、Island部分もパスが正しければそのまま動作する。
よくある誤解
「Island Architectureのページは完全に静的HTMLだからJSは不要」と思うのは誤りだ。静的部分は確かにJSなしで表示されるが、インタラクティブなIslandはJSが必要だ。共有時にJSを省略すると「見えるが動かない」状態になる。
「AstroはReactより難しい」という印象からAI生成コードにAstroが混じっていると戸惑う人もいるが、実際にはHTML出力の静的部分はただのHTMLとCSSであり、ブラウザで直接開ける。Island部分のみを後から追加する構造のため、JSを一部省いてもレビューできる範囲が広い。
安全に使うための注意点
Island部分のJSはClient Componentとしてバンドルされるため、そこに含まれるAPIキーや環境変数は全ユーザーから見える状態になる。AstroやNext.jsの`NEXT_PUBLIC_`プレフィックス付き変数をIslandコンポーネントで使う際は、その変数が秘匿情報でないかを共有前に必ず確認する。
Islandコンポーネントがサードパーティスクリプト（アナリティクス、チャットウィジェットなど）を読み込む設定になっている場合、共有先のブラウザからそのサービスにトラッキングデータが送信される。レビュー専用URLでは不要な外部スクリプトを無効化し、最低限のIslandだけを有効にした状態で共有するとよい。
よくある質問
AstroでビルドしたページのどのファイルをアップロードすればIslandが正常に動きますか？
`astro build`後に生成される`dist/`フォルダ全体をアップロードしてください。`dist/_astro/`以下にIsland用のJSチャンクが入っており、これが欠けるとインタラクティブな部品が動作しません。
Island Architectureのサイトは、静的ホスティングサービスで配信できますか？
はい、Astroはデフォルトで純粋な静的ファイルを出力するため、ギガサイト便やNetlify Dropなど静的ホスティングに対応するサービスならどこでも配信可能です。サーバー不要で動きます。
Island化するコンポーネントと静的のままにするコンポーネントは何を基準に決めればいいですか？
クリック・入力・スクロールイベントを扱う部品はIsland（`client:load`など）に指定し、表示だけのコンテンツは静的のままにするのが基本方針です。IslandはJSコストがかかるため必要最小限にとどめます。