Astro で静的ブログを作る理由

Astro とは

Astro は「コンテンツ重視のサイト」に特化したフレームワークです。ブログ、ドキュメントサイト、マーケティングページなどに向いています。

Islands Architecture

Astro の核心は Islands Architecture (アイランドアーキテクチャ) です。

┌─────────────────────────────┐
│  静的 HTML (サーバーでレンダリング)  │
│  ┌───────┐    ┌──────────┐  │
│  │ Island │    │  Island  │  │
│  │ (JS有) │    │  (JS有)  │  │
│  └───────┘    └──────────┘  │
└─────────────────────────────┘

ページの大部分は静的 HTML として配信し、インタラクティブな「島」だけに JavaScript を注入します。

Next.js との違い

	Astro	Next.js
デフォルト JS	0KB	ランタイム込み
主な用途	コンテンツサイト	アプリケーション
ルーティング	ファイルベース	App Router / Pages
データフェッチ	ビルド時	SSR/SSG/ISR

シンタックスハイライトは Shiki

Astro は Shiki をビルドインでサポートしています。

def fibonacci(n: int) -> int:
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

print(fibonacci(10))  # 55

fn main() {
    let numbers = vec![1, 2, 3, 4, 5];
    let sum: i32 = numbers.iter().sum();
    println!("合計: {}", sum);
}

ハイライトはすべてビルド時に処理されるため、クライアント側の JS はゼロです。

まとめ

ブログや静的サイトを作るなら Astro は最有力候補です。Next.js のように「なんでもできる」フレームワークではなく、「コンテンツを速く届ける」ことに集中した設計が気持ちいいです。

S	公式ソース確認済み
A	成功実績多数・失敗例少数
B	賛否両論
C	動作未確認・セキュリティリスク高
Z	個人所感