SPAフレームワークは動的なUI開発を容易にした一方で、ドキュメント主体のWebサイトにおいてはJavaScript配信量の増大を招く要因にもなりました。

アイランドアーキテクチャは、ページ全体を純粋な静的HTMLで構築しつつ、動的な操作が必要なコンポーネントのみを独立した「島」として読み込むアプローチです。

1. 選択的ハイドレーションの構造

画面全体のDOMツリーを一括で再構築するのではなく、コンポーネント単位で制御します。

  • 記事本文やレイアウト枠組みはスクリプトなしのHTMLとして出力されます。
  • 検索窓やフィルタ機能など、操作が必要な箇所のみがスクリプトを実行します。
  • 全体のバンドルサイズを抑えられる反面、島同士で状態を共有する場合にはカスタムイベント等の設計が必要となります。

2. SSGとの連携と留意点

AstroなどのSSGと組み合わせることで初期表示の負荷を軽減できますが、実際のWebパフォーマンスは画像の最適化や外部スクリプトの配置など全体的な設計に左右されます。