Islands Architecture

ページ全体を SPA にせず、必要なインタラクティブ部分だけを独立した「島」として JavaScript で動作させる Web アーキテクチャ。静的 HTML を基本配信としつつ、動的に必要な箇所だけ Hydrate することで JS バンドルを最小化し、パフォーマンスと SEO を両立する。

概要

Islands Architecture は Etsy のフロントエンドアーキテクト Katie Sylor-Miller が 2019 年に提唱し、Preact 作者の Jason Miller が 2020 年のブログ記事「Islands Architecture」で広く普及させた設計パターン。

ページ全体を React / Vue で覆う SPA とは対照的に、ページの大部分は静的 HTMLで配信し、インタラクティブ性が必要な部分だけを独立したコンポーネント（島）として後から Hydrate する。これにより:

JS バンドル総量が激減（島の数と大きさに比例）
初期表示が HTML 即配信で高速（LCP 改善）
SEO に有利（クローラーが HTML をそのまま解釈）
Progressive Enhancement（JS 無効でも基本機能が動く）

SPA・MPA との比較

観点	SPA	MPA（従来）	Islands
初期表示	JS 実行後に描画（遅い）	HTML 即描画（速い）	HTML 即描画（速い）
JS 量	ページ全体を JS 化（大）	最小（サーバーサイド）	島の部分だけ（中〜小）
ページ遷移	SPA 内で高速	フルリロード	フルリロード or View Transitions
SEO	クローラー依存	◎	◎
インタラクティブ	◎	△（JQuery 等で補強）	○（島単位で柔軟）
代表例	Next.js / Nuxt / SvelteKit	WordPress / Rails / Laravel	Astro / Qwik / Marko / Fresh

Hydration の 3 パターン

Islands Architecture を実装するフレームワークは、島の Hydration タイミングを制御する戦略を提供する。

戦略	タイミング	用途
load	ページ読み込み直後	ヘッダーの検索バー等、即座に必要
idle	ブラウザが idle になったら	優先度が低いが早めに動かしたい
visible	要素がビューポートに入ったら	スクロール先のカルーセル等
media	メディアクエリ条件一致時	モバイルだけ有効にするメニュー等
only (クライアント専用)	SSR せず初回から JS 側で描画	地図・エディタ等 SSR 不可コンポーネント

Astro の client:load / client:idle / client:visible ディレクティブや、Qwik の Resumability がこのパターンの代表実装。

主要な実装フレームワーク

Astro

Astro は Islands Architecture を最も代表するフレームワーク。デフォルトで JS ゼロ配信、client:* ディレクティブで島を明示的に指定する。React / Vue / Svelte / Solid / Preact を混在可能。

Qwik

Resumability という独自戦略で Hydration 自体を不要化。サーバーでレンダリングした状態をシリアライズし、クライアントで「再開」する方式。初期 JS が極端に少ない（数 KB）のが特徴。

Marko

eBay が開発。Streaming SSR + 部分 Hydration で、大規模 EC サイトのパフォーマンス向上に使われる。

Fresh（Deno）

Deno + Preact ベース。島を islands/ ディレクトリに配置するだけで自動判定、ビルドレスで開発できる。

Partial Hydration との違い

「Partial Hydration」は広義の用語で、「ページ全体を Hydrate せず一部だけ Hydrate する」という概念全般を指す。一方、Islands Architecture は「独立した島」として責務を分離する設計パターンであり、Partial Hydration の一実装形態にあたる。

Partial Hydration: Hydrate 対象を絞る = 広義
Islands Architecture: 島を明示的にコンポーネント化 = 設計パターン

CTS での活用

CTS のコーポレートサイト（www.cts-g.com）・ナレッジベース（kb.cts-g.ai）は、Astro の Islands Architecture を採用している。主な効果:

PageSpeed Insights 4 カテゴリすべて 100 点
総 JS バンドルサイズは数十 KB（他フレームワークの 1/10〜1/20）
ダークモード切替・ハンバーガーメニューなど、動的必要な島だけ JS を配信

概要