Astroの理解を深めたい
Astroの理解を深めたい
投稿日: 2025-04-12
更新日: 2025-04-12
Astro とは？
一言でいうと、「ウェブフレームワーク」
じゃあウェブフレームワークとは？ → Web アプリや Web サイトを効率的に作るためのツール（枠組み）のこと。便利。
どんなウェブフレームワークなのか？ → 必要なものだけを読み込む、超高速で省エネなサイトが作れるフレームワーク。
他にどんなウェブフレームワークがあるのか？ → Next.js, Django, Laravel など。
特徴
- 超高速
- コンテンツ駆動
- Markdown で記事管理
なぜ超高速なのか？
一言で言うと、Astro は “必要なものだけ、必要なだけ” を届けるから速い。
超高速である理由
- デフォルトで JavaScript を送らない（Zero JS by default）
- ブラウザは静的な HTML だけを受け取って描画するから爆速
- プリレンダリング（Static Site Generation）
- Astro は基本的に**全ページをビルド時に HTML に変換（静的生成）**する。サーバー処理ナシってこと。
コンテンツ駆動とは？
一言で言うと、Astro は、コンテンツを上手く表示するために設計されている。
フレームワークは、ウェブアプリケーションを作成するために設計されているが、 Astro は、コンテンツが豊富なウェブサイトを構築するために設計されている。
コンテンツが豊富なウェブサイトの例
- マーケティングサイト
- 出版サイト
- ドキュメントサイト
- ブログ
- ポートフォリオ
- ランディングページ
比較
Next.js
| Astro | Next.js | |
|---|---|---|
| 速さ（表示） | 超高速 | 高速だけど JS が多め |
| JS の量 | 必要なところだけ（ゼロ JS が基本） | React 全体を動かすので基本的に多め |
| ブログのとの相性 | 超得意（Markdown, MDX, SEO⚪︎） | 得意だけど構築がやや重め |
| 柔軟さ/アプリ向き | 限定的 | アプリっぽい動き・API 連携が得意 |
| 学習コスト | 低め（HTML の感覚に近い） | 高め（React とか） |
| 開発体験 | 軽い。Vite ベース | ガッツリ |
どちらを選ぶべきか？
| やりたいこと | オススメ |
|---|---|
| シンプルで爆速なブログを作りたい | Astro |
| 検索機能、ログイン機能が欲しい | Next.js |
| Markdown で記事管理 | Astro |
| 複雑なサービスやアプリにも拡張したい | Next.js |