静的ページのどのUIをJavaScriptの島にする？

アイランドアーキテクチャは、ページの大部分をサーバー生成HTMLで配信し、操作や個別化が必要な部分だけをクライアントでハイドレーションする設計です。「component island」という語はEtsyのKatie Sylor-Millerが2019年に作り、Jason Millerが2020年の記事で考え方を説明しました。Astroのアイランド解説、Jason Millerの原文

分割するときの判断

  • 1. JavaScriptなしでも意味が伝わる本文とナビゲーションはHTMLに残します。記事本文、見出し、通常のリンクは初期HTMLで読める状態にします。
  • 2. ブラウザー上の動作が必要な部品だけを島にします。検索候補表示は操作が必要でも、静的な目次や著者紹介には不要な場合があります。
  • 3. 部品ごとの読み込み時期を選びます。Astroのclient:loadはページ読み込み時、client:idleはブラウザーがアイドル時、client:visibleは画面内に現れた時に読み込みます。重要な購入・ナビゲーション機能と、ページ下部の補助ウィジェットを最初から同じ優先度にしないでください。
  • 4. 独立した島の間で状態を共有する方法を確認します。ログインやカート情報を共有することがあり、島が増えるとバンドル、通信、状態管理も増える可能性があります。

例：記事ページとコメント欄

長い記事は静的HTMLで表示し、コメント入力・並べ替えだけを操作可能にするとします。スクリプト読み込み前でも記事は読めるようにします。下部のコメント欄にはclient:visibleのような遅延読み込みを検討できますが、アクセシビリティ、検索可能性、コメントの表示方法も確認します。実際のレスポンス量、JavaScript実行時間、操作遅延を測定して構成の効果を判断します。

SSGと性能は別の判断

静的サイト生成（SSG）はビルド時にHTMLを作る方法で、アイランドはそのページ内のブラウザー操作を分割する方法です。併用できますが同じ仕組みではありません。HTML量、画像、CSS、ウィジェットコード、サーバー側の個別化も性能に影響します。アイランドだけで速度スコアやアクセシビリティが保証されるわけではありません。キーボードとスクリーンリーダーで確認し、JavaScriptを無効にした場合に何が使えるかも試してください。

参考資料