Astro

概要

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 設定で動作モードを切り替えられる。

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

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

バージョン履歴

• 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、型安全な環境変数

参考

• 公式ドキュメント Why Astro?
• Islands Architecture
• Content Collections