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

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

アイランドアーキテクチャは、Astroが採用している革新的なWebアーキテクチャパターンです。静的なHTMLの「海」の中に、インタラクティブな「島」（Islands）が点在するイメージから名付けられました。

従来のSPAとの違い

従来のSPA（シングルページアプリケーション）では、ページ全体がJavaScriptで管理されます。これには以下の問題がありました：

• 初期ロードが重い: すべてのJavaScriptをダウンロードして実行する必要がある
• 不要なハイドレーション: インタラクティブでない部分までJSで管理される
• パフォーマンスの低下: 大規模なアプリケーションほど顕著

アイランドアーキテクチャのメリット

1. パフォーマンスの向上

必要な部分だけにJavaScriptを配信するため、初期ロードが高速になります。

---
// 静的コンテンツ
const title = "ようこそ";
---

<div>
  <h1>{title}</h1>
  <!-- この部分は静的HTML -->
  <p>この部分は静的に生成されます</p>

  <!-- この部分だけがインタラクティブ -->
  <Counter client:idle />
</div>

2. 選択的ハイドレーション

Astroでは、コンポーネントにディレクティブを付けることで、いつハイドレーションするかを制御できます：

• client:load - ページロード時
• client:idle - ブラウザがアイドル時
• client:visible - ビューポートに表示された時
• client:media - メディアクエリが一致した時

3. フレームワークに依存しない

React、Vue、Svelte、Solidなど、複数のフレームワークを1つのプロジェクトで使用できます。

実装例

// Counter.tsx (React)
import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

---
// index.astro
import { Counter } from '../components/Counter';
---

<Layout>
  <h1>静的コンテンツ</h1>
  <p>この部分は高速な静的HTML</p>

  <!-- 必要な時だけJSをロード -->
  <Counter client:visible />
</Layout>

まとめ

アイランドアーキテクチャは、静的サイトの高速性とSPAのインタラクティブ性を両立させる、現代的なアプローチです。Astroを使うことで、この革新的なパターンを簡単に実装できます。