Astroアイランド入門 — 必要な部分だけをハイドレートして高速化する - まちのIT屋さん MAO工房

Astro の大きな特徴のひとつが「アイランド（Islands）アーキテクチャ」です。ページ全体をクライアント JavaScript でレンダリングするのではなく、インタラクティブが必要な小さな部品だけを選んでハイドレート（ブラウザ側で再有効化）する考え方です。これにより初期表示の軽量化と LCP や CLS といった Core Web Vitals の改善が期待できます。

以下では、アイランドアーキテクチャの概念、Astro での実装方法、ハイドレーション戦略、実践的なコード例、そして注意点とベストプラクティスを順に解説します。

アイランドアーキテクチャとは

従来の SPA（Single Page Application）はページ全体を JavaScript で描画します。一方でアイランドアーキテクチャは「静的にレンダリングされた HTML をベースに、インタラクティブな小さな『島（アイランド）』だけを部分的にハイドレートする」パターンです。

メリット：

初期ロードが軽く、First Contentful Paint / Largest Contentful Paint が向上する
必要な箇所だけ JavaScript を読み込むため、ネットワークと CPU の負荷を削減できる
サーバサイドレンダリング（SSR）や静的サイト生成（SSG）との相性が良い

Astro はこの考え方を標準でサポートし、コンポーネントごとにハイドレーション方法を指定できます。

Astro Islandsで必要な部分だけJavaScriptを動かす考え方を整理した図解

Astro におけるハイドレーション方式

Astro ではコンポーネントを以下のように使い分けます（簡略）：

client:load — ページが読み込まれたら直ちにハイドレート
client:idle — ブラウザがアイドル状態になったらハイドレート
client:visible — コンポーネントがビューポートに入ったらハイドレート
client:only — クライアントのみで実行（SSR 出力を行わない）
client:media=“(max-width:768px)” — メディアクエリに基づく条件付きハイドレーション

選択の基本方針：初期表示に不要なインタラクティブは後回しにし、重要な UI は優先的にハイドレートします。

どれを選ぶか？（目安）

ナビゲーションのドロップダウンや重要なフォーム：client:load
チャートや重い UI：client:visible（遅延ロード）
補助的なウィジェット（レコメンド等）：client:idle

実践：コード例

以下は簡単なカウンターコンポーネントをアイランドとして配置する例です。

---
import Counter from '../components/Counter.jsx';
---

<div>
  <h2>このセクションだけインタラクティブにしたい</h2>
  <Counter client:visible />
</div>

Counter.jsx（React 実装の例）:

import { useState } from "react";

export default function Counter() {
  const [n, setN] = useState(0);
  return (
    <button onClick={() => setN(n + 1)} className="px-4 py-2 bg-primary text-white rounded">
      クリック: {n}
    </button>
  );
}

上記のようにすることで、ページ本体は静的 HTML として高速に配信され、ユーザーがその領域に来たときだけ Counter がハイドレートされます。

Astro の組み込みコンポーネント例

Astro のコンポーネントはフレームワークに依存しません。以下のように Svelte や Preact、React、Solid、Vue のコンポーネントを混在させられます。

---
import Widget from '../components/Widget.svelte';
import Map from '../components/Map.react.jsx';
---

<Widget client:idle />
<Map client:load />

ベストプラクティス

最初にユーザーに見せたいコンテンツを決める（LCP を意識）
- ヒーローや主要な本文は可能な限り静的に出力する
インタラクションの優先度を決める
- そのページで本当に必要なインタラクションだけを早くハイドレートする。残りは遅延させる。
遅延ロードの条件指定を活用する
- client:visible や client:media を使うと、ユーザーの行動に合わせて必要なリソースだけを使える
小さく分割されたコンポーネントを設計する
- 大きなコンポーネントを一括でハイドレートすると効果が薄れる。小さい責務ごとのコンポーネント設計を心がける
クライアントバンドルの最小化
- 不要な依存（大型 UI ライブラリなど）は避ける。プリレンダリング可能なロジックはサーバで処理する
監視と測定を行う
- Lighthouse、WebPageTest、Core Web Vitals のデータを継続的に取得し、変更の効果を評価する

よくある落とし穴と対処法

問題: client:load を多用してしまい、結局重いページになる
- 対処: 各コンポーネントに本当に load が必要か見直す。visible や idle に切り替えられないか検討する
問題: サードパーティスクリプトがページ全体を遅くする
- 対処: サードパーティは defer 或いは遅延読み込み、もしくは iframe で隔離する
問題: 大きなライブラリをクライアントで読み込んでしまう（例: chart ライブラリ）
- 対処: 動的インポートと client:visible を組み合わせ、必要時のみロードする

具体的なパフォーマンス測定フロー

ベースライン計測（Lighthouse、Field データ）
主要なページでアイランド化を適用（例: 商品ページの購入フォーム、レビューウィジェットのみ）
変更後に Lighthouse と現場データを比較
減った JS バンドル量、改善した LCP、影響が出た UX をトレードオフ評価

まとめと次のステップ

Astro のアイランドアーキテクチャは、静的レンダリングの利点を維持しながら、必要なインタラクションを効率的に提供する強力な手法です。小さく分割して、優先度の高い要素だけを早めにハイドレートするという設計思想を守ると、大きなパフォーマンス改善が見込めます。

まずはサイトの主要ページで 1〜2 個のコンポーネントをアイランド化して、効果を測ることを推奨します。必要であれば、既存コンポーネントの分割支援やハイドレーション戦略の設計もお手伝いします。

この記事が役に立ったら、SNSでの拡散にご協力ください 🙏

Xでシェア LINEで送るリンクを開く

ご感想や引用リツイートでの補足も大歓迎です。多くの方に届くと嬉しいです！

Astroアイランド入門 — 必要な部分だけをハイドレートして高速化する

目次