Astroは、ブログやドキュメント、コーポレートサイトなど「コンテンツ重視のWebサイト」に特化した次世代フレームワークです。デフォルトでJavaScriptをほぼゼロ送信し、必要な箇所だけインタラクティブにする「Islands Architecture」を採用しています。本記事では、Astroの特徴と、なぜコンテンツサイトに最適なのかを解説します。
Astroとは
Astroは、静的サイト生成（SSG）を中心としつつ、必要に応じてSSR・ハイブリッドレンダリングも選べるオールインワンのWebフレームワークです。React・Vue・Svelte・Solidなど複数のUIライブラリを同一プロジェクト内で混在させられる柔軟性も特徴です。
Islands Architecture
Astroの最大の特徴が「Islands Architecture（島アーキテクチャ）」です。ページの大半は静的HTMLとして配信し、インタラクティブが必要な部分（=島）だけJSで動かす設計思想です。これにより、JavaScriptバンドルが劇的に小さくなります。
---
import Counter from '../components/Counter.jsx';
---
<h1>静的なコンテンツ</h1>
<Counter client:visible /> <!-- 表示時にだけハイドレート -->コンテンツ重視サイトに最適な理由
- 初期表示が圧倒的に速い：JSをほぼ送らないためLighthouseスコアが伸びやすい
- SEOに強い：静的HTMLで配信されるためクローラビリティが高い
- Markdown / MDXの一級サポート：ブログ・ドキュメント作成が容易
- Content Collections：Markdownの型を定義してTypeScriptで安全に扱える
- UIライブラリ混在可能：チームの好みやリプレース戦略に柔軟
導入の流れ
# プロジェクト作成
npm create astro@latest
# 開発サーバー
npm run dev
# ビルド
npm run buildclient:* ディレクティブの使い分け
client:load：ページ読み込み時にハイドレートclient:visible：表示領域に入った時にハイドレート（おすすめ）client:idle：ブラウザがアイドル時にハイドレートclient:only="react"：完全クライアントサイドで描画
向いている / 向いていないケース
- 向いている：ブログ、ドキュメント、マーケティングサイト、ポートフォリオ、メディア
- 向いていない：管理画面・SaaS・ダッシュボードなど高インタラクティブなアプリ（→Next.js等が無難）
まとめ
Astroは「コンテンツを速く・正しく届ける」ことに最適化された希有なフレームワークです。JSを送らないことで圧倒的な体感速度を実現でき、SEOにも好相性。コンテンツサイトを新規構築するなら、まず候補に入れるべき選択肢です。
