Astro 概要

作成日:
Astro frontend SSG

Astroは、コンテンツ駆動型のWebサイト構築に最適化された静的サイトジェネレーター/Webフレームワークです。

Astroとは

Astroは以下の特徴を持つWebフレームワークです：

  • コンテンツ重視: ブログ、ドキュメント、マーケティングサイトなど、コンテンツ中心のサイト構築に最適化
  • 高速なパフォーマンス: デフォルトでゼロJavaScriptを出力し、必要な箇所のみクライアントJSを読み込む
  • Island Architecture: ページ内の独立した部分（Island）のみをインタラクティブにする設計思想
  • UIフレームワーク非依存: React、Vue、Svelte、Solid、Preactなど複数のUIフレームワークを統合可能

Island Architectureとは

Island Architecture（アイランドアーキテクチャ）は、Astroの核となる設計思想です。

従来のSPAはページ全体をJavaScriptで制御しますが、Island Architectureでは：

  1. ページの大部分は静的なHTMLとして配信
  2. インタラクティブな部分（Island）のみJavaScriptを読み込む
  3. 各Islandは独立してハイドレーション

これにより、ページの初期読み込みが高速になり、ユーザー体験が向上します。

前提条件

  • Node.js: v18.20.8以降、v20.3.0以降、またはv22.0.0以降
    • v19とv21は非対応
  • パッケージマネージャー: npm / pnpm / yarn のいずれか
node -v
npm -v

関連トピック

拡張機能

公式ドキュメント

参考