Astroとはどんなフレームワークか
Astroは、コンテンツ駆動型Webサイトに特化したフレームワークだ。デフォルトでブラウザにJavaScriptを送らず、必要なインタラクティブ部分だけを「Islands（アイランド）」として選択的にハイドレーションする。
ブログ、ドキュメントサイト、マーケティングサイト、ECサイトなど、コンテンツが主体のサイトで最高のパフォーマンスを発揮する。React、Vue、Svelte、Solidのコンポーネントを同一プロジェクト内で混在利用できる。
主な機能とコンテンツサイトでの強み
- デフォルトでJSゼロ出力：静的HTMLのみを出力。必要時だけJSを追加
- Islands Architecture：インタラクティブなコンポーネントだけを選択的にハイドレーション
- マルチフレームワーク対応：React、Vue、Svelte、Solid、Preactのコンポーネントを混在利用
- Content Collections：Markdown/MDXを型安全に管理。frontmatterのバリデーション付き
- View Transitions：ページ遷移のアニメーションをネイティブAPIで実現
- SSR対応：Vercel、Netlify、Cloudflare Workers、Denoなどのアダプター提供
- 高Lighthouseスコア：最小限のJSでパフォーマンス100を達成しやすい
インストールとブログサイトの構築
# プロジェクト作成
npm create astro@latest
# テンプレート指定
npm create astro@latest -- --template blog
プロジェクト構造：
src/
├── pages/ # ファイルベースルーティング
│ ├── index.astro
│ └── blog/
│ └── [slug].astro
├── content/ # Content Collections
│ └── blog/
│ ├── first-post.md
│ └── second-post.md
├── components/ # コンポーネント
│ ├── Header.astro
│ └── Counter.tsx # Reactコンポーネントも可
└── layouts/
└── Base.astro
Astroコンポーネントの例（src/pages/index.astro）：
---
// フロントマター（サーバーサイドで実行）
import Layout from '../layouts/Base.astro';
import { getCollection } from 'astro:content';
const posts = await getCollection('blog');
---
<Layout title="ブログ">
<h1>記事一覧</h1>
<ul>
{posts.map(post => (
<li>
<a href={`/blog/${post.slug}`}>{post.data.title}</a>
</li>
))}
</ul>
</Layout>
Islands Architectureの実践
Reactコンポーネントをインタラクティブなアイランドとして配置：
---
import Counter from '../components/Counter.tsx';
---
<!-- 静的HTML（JSなし） -->
<h2>この部分は純粋なHTML</h2>
<!-- クライアントサイドでハイドレーション -->
<Counter client:visible />
ハイドレーション戦略：
| ディレクティブ | タイミング | 用途 |
|---|---|---|
client:load |
ページ読み込み時 | 即座に必要なUI |
client:visible |
画面に表示された時 | スクロール下のUI |
client:idle |
ブラウザがアイドル時 | 優先度低いUI |
client:media |
メディアクエリ一致時 | レスポンシブUI |
競合フレームワークとの比較
| フレームワーク | デフォルトJS | マルチFW | 用途 | パフォーマンス |
|---|---|---|---|---|
| Astro | ゼロ | ◎ 対応 | コンテンツサイト | ◎ 最高 |
| Next.js | Reactバンドル | × React専用 | フルスタックアプリ | ○ 良好 |
| Nuxt | Vueバンドル | × Vue専用 | フルスタックアプリ | ○ 良好 |
| Hugo | ゼロ | × Goテンプレ | 静的サイト | ◎ ビルド最速 |
| Eleventy | ゼロ | △ テンプレ言語 | 静的サイト | ◎ シンプル |
差別化ポイント：Astroはコンテンツサイトのパフォーマンスに特化している点でNext.jsやNuxtと差別化される。Next.jsはフルスタックアプリに強いが、ブログのような読み物中心のサイトではJSの送信量が多くなりがち。Hugoはビルド速度が最速だが、Reactコンポーネントの利用はできない。
AI関連ドキュメントサイトでの活用
OSSプロジェクトのドキュメントサイトやAIツールの紹介サイトにAstroは最適だ。shadcn/uiのReactコンポーネントをAstroのIslandsとして埋め込むことで、インタラクティブなデモを含むドキュメントを高パフォーマンスで構築できる。
ビルドツールとして内部でViteを使っているため、開発時のHMRも高速だ。DifyやLangChainのチュートリアルサイトをAstroで構築すれば、SEOとパフォーマンスの両方で有利になる。
まとめ：Astroが向いているケース
Astroは「ブログ、ドキュメント、マーケティングサイトなどコンテンツ中心のサイトを、最高のパフォーマンスで構築したい」場合に最適だ。既存のReactやVueのコンポーネント資産を活かしつつ、JSの送信量を最小限に抑えられる。