Astroは静的サイトを速く作れるのが強みです。ただ、サイトを作っていると「本文は静的でいいけど、この一部分だけはログイン状態や最新データで変えたい」という場面が出ます。
そこで使えるのがAstroのServer Islandsです。ページ全体を動的にするのではなく、必要なパーツだけをサーバー側で遅延レンダリングできます。静的な速さを残しながら、動的な部品だけ差し込む考え方です。
Server Islandsとは
Server Islandsは、動的またはパーソナライズされたコンポーネントをページ本体から分けて、個別にオンデマンドでレンダリングする仕組みです。Astro公式ドキュメントでは、重要な本文を先に見せつつ、動的な島だけ後から取得するパターンとして説明されています。
向いているUI
- ログイン中ユーザーのメニュー
- アカウントごとの通知
- 在庫や残席など、少しだけ動的な表示
- ランキングの一部だけ最新化したい表示
- 広告やおすすめ枠など、本文とは独立して読み込ませたいパーツ
基本の書き方
使い方はかなり素直で、遅延させたいコンポーネントにserver:deferを付けます。読み込み中の表示はslot="fallback"で置けます。
ページ側
---
import UserMenu from '../components/UserMenu.astro';
---
<main>
<h1>NINES ANALYZE</h1>
<p>ランキングや記事本文など、まず読ませたい部分は静的に返す。</p>
<UserMenu server:defer>
<p slot="fallback">ログイン状態を確認中...</p>
</UserMenu>
</main>コンポーネント側
---
const session = await getSession(Astro.cookies);
---
{session ? (
<nav>
<a href="/dashboard/">ダッシュボード</a>
<a href="/account/">アカウント</a>
</nav>
) : (
<a href="/login/">ログイン</a>
)}この例では、ページの見出しや本文は先に返し、ユーザーメニューだけを後からサーバーでレンダリングします。ログイン状態の確認が少し遅くても、ページ全体の表示を止めにくいのがメリットです。
普通のSSRとの違い
| 方式 | 考え方 | 向いている場面 |
|---|---|---|
| SSG | ビルド時にHTMLを作る | 記事、LP、ドキュメント |
| SSR | ページ全体をリクエストごとに作る | ページ全体がユーザーごとに変わる |
| Client Island | ブラウザでJSを動かす | 操作UI、フォーム、グラフ |
| Server Island | 一部分だけサーバーで遅延レンダリングする | 静的本文＋少し動的なパーツ |
キャッシュで気をつけること
Server Islandsは便利ですが、何でも入れればいいわけではありません。公式ドキュメントでも、propsがURLクエリに入り、長くなりすぎるとPOSTに切り替わる場合があることが説明されています。キャッシュを効かせたいなら、渡すpropsは小さくしておくのが大事です。
export async function GET() {
const data = await fetchLatestStats();
return new Response(JSON.stringify(data), {
headers: {
'content-type': 'application/json',
'cache-control': 'public, max-age=60, stale-while-revalidate=300',
},
});
}特にランキングや最新記事のような表示は、1分だけキャッシュする、古いデータを少し許容する、といった設計にすると体感が良くなります。毎回全部をリアルタイムにしようとすると、せっかくのAstroの軽さが消えます。
NINES系サイトで使うなら
NINES ANALYZEのようなデータ系サイトなら、チーム紹介や指標説明は静的、ログイン後メニューや一部の最新ランキングだけServer Island、という分け方が現実的です。kjnine.comのような記事中心サイトでも、本文は静的にして、人気記事やおすすめ枠だけ動的にする使い方が考えられます。
使わない方がいい場面
- 全部のコンテンツがユーザーごとに変わるページ
- JavaScriptだけで完結する軽い開閉UI
- SEO上、初期HTMLに必ず入れておきたい本文
- propsが大きくなりすぎるコンポーネント
- キャッシュ戦略を決められていない動的表示
あわせて読みたい
参考資料
まとめ
AstroのServer Islandsは、静的サイトの速さを残しながら、一部だけ動的にしたいときに使いやすい仕組みです。全部をSSRにするほどではないけど、ログイン状態や最新データは出したい、という場面に合います。
ポイントは、動的にする範囲を小さくすることです。本文、見出し、検索流入で読ませたい内容は静的に返し、変わる必要がある部品だけをserver:deferで分ける。これが一番Astroらしい使い方だと思います。
