Astro | 開発用語Wiki

概要

Astroは、ブログ・マーケティングサイト・ドキュメントなどコンテンツドリブンなWebサイトの構築に特化したモダンなWebフレームワーク。「Zero JavaScript by Default（デフォルトゼロJS）」と Islands Architecture を中心思想として設計されており、高速で軽量なサイトを実現する。

公式サイト: astro.build

Islands Architecture

Islands Architecture（アイランドアーキテクチャ）は、ページの大部分を静的HTMLとして配信し、インタラクティビティが必要な箇所だけを「島（Island）」として個別にJavaScriptで動かす設計パターン。

不要なJavaScriptを排除してページ読み込みを高速化する
選択的ハイドレーション（Selective Hydration）により必要な部分だけが動的になる
Reactなどのフルハイドレーションと比べてJavaScriptペイロードを大幅に削減できる

---
// このコンポーネントはHTMLのみ出力する（JSなし）
---
<p>静的なコンテンツ</p>

<!-- client:load でこの島だけJSを読み込む -->
<Counter client:load />

主な機能

Zero JavaScript by Default

すべてのコンポーネントはデフォルトでHTMLにレンダリングされ、クライアントサイドのJavaScriptは含まれない。client:load client:idle client:visible などのディレクティブを明示的に付けた場合のみJSが有効になる。

SSR / SSG

astro.config.mjs の output 設定で動作モードを切り替えられる。

設定値	動作
`static`	ビルド時に全ページを静的HTMLとして生成（SSG）
`server`	リクエストごとにサーバーでレンダリング（SSR）
`hybrid`	ページごとにSSR/SSGを混在させる

Content Collections

src/content/ 配下のMarkdown・JSON・YAMLを型安全に管理する仕組み。Zodスキーマでフロントマターのバリデーションが行われるため、typoや型ミスをビルド時に検出できる。

// src/content/config.ts
const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    draft: z.boolean().default(false),
  }),
});

マルチフレームワーク対応

React・Vue・Svelte・SolidJS・Preactなど複数のUIフレームワークを同一プロジェクト内で混在させられる。

npx astro add react
npx astro add vue

他フレームワークとの比較

項目	Astro	Next.js	SvelteKit
デフォルトJS	なし	あり	あり
複数FW対応	あり	なし	なし
最適な用途	ブログ・ドキュメント	アプリ・SPA	アプリ全般

バージョン履歴

v1.0 (2022年8月) — 正式リリース
v2.0 (2022年12月) — Content Collections導入
v3.0 (2023年8月) — View Transitions API対応
v4.0 (2023年12月) — Dev Toolbar、i18nルーティング
v5.0 (2024年12月) — Content Layer API、Server Islands、型安全な環境変数

概要