Astroで静的サイトを構築してみて

この記事は2023年、Astroで初めて静的サイトを構築したときの感想として書いたものです。フレームワークの順番としては、Nuxt.js、Next.js、Gatsby.jsに続いて4つ目でした。

当時「静的サイト構築ならAstro一択と思うほど完璧」と書いたのですが、あれから3年、結局このブログ自体をAstroで作り直して運用するまでになりました。せっかくなので、当時の感想を残しつつ、2026年の視点で答え合わせをしていきます。

軽量で超高速なサイトが簡単に構築できる

Astroの最大の魅力はビルド後のファイルにあります。

静的サイト構築（SSG）はどのフレームワークでも実現できますが、Astroのアプローチは一線を画していて、可能な限りサーバーサイドで処理を実行してHTMLを生成するため、JavaScriptの少ない軽量なサイトになります。他のフレームワークだとバンドルサイズを削るために試行錯誤が必要ですが、Astroでは不要です。

以下は当時、PageSpeed Insightsでブログページ（画像あり、アドセンスなし）を計測したモバイルとPCの結果です。何も気にせず構築しただけで満点に近いスコアでした。

この「何もしなくても速い」という感覚は、3年使った今も変わりません。

SPAの必要性とは？

Astroのサイトが速い背景には、SPAではなくMPA（ページごとにHTMLを読み込む昔ながらの方式）を採用していることもあります。

2023年時点のAstroにはSPA的なページ遷移の機能がなく、私は記事中で「ほとんどのサイトではMPAこそベスト」と書きました。普通のブログやコーポレートサイトでは、1ページ目で離脱するユーザーが大半だからです。リロードなしの遷移に抱いていたスマートな印象は、自己満足だったと気づかされました。

ここは答え合わせが必要なところで、現在のAstroには`<ClientRouter />`というコンポーネントが用意され、ページ遷移アニメーション付きのSPA的な挙動を後付けできるようになっています（Astro 5で現在の名前になりました）。つまり「機能がない」は過去の話です。

ただ、私の結論は変わっていません。このブログでもClientRouterは使っていません。MPAで十分速いからです。必要になったら足せる、という選択肢が増えたと捉えています。

学習難易度の低さ

Astroの.astroファイルは、HTMLとReactとVueの良さを混ぜたような記述方法で、すぐに慣れます。

一点、ReactライクですがonClickのような直感的なイベント記述はできず、<script>タグに素のJavaScriptを書く必要があります。素のJSに苦手意識がある場合も、AstroはReactやVueのコンポーネントを混在できるので、インタラクティブな部分だけReactで書く、といった切り分けで対処できます。当時のプロジェクトでは、モーダル部分をReactで作ってclient:only="react"で読み込んでいました。この仕組み（アイランドアーキテクチャ）は今もAstroの中核です。

そしてこの3年、AstroはバージョンでいうとV2からV6まで進みましたが、.astroの基本的な書き方はほぼ変わっていません。メジャーバージョンアップのたびに書き方を覚え直すフレームワークもある中で、学習した資産が無駄にならなかったのは、地味ですが大きな美点だと思います。

2026年の追記：静的サイト「以外」も任せられるようになった

2023年のこの記事はSSG（静的サイト）の話だけでしたが、現在のAstroはサーバーレンダリング（output: "server"）も普通に使えます。

実際、このブログはWordPressからAstroベースの構成に移行していて、記事データはデータベースに置き、ページはリクエスト時にサーバーでレンダリングしています。CMSと組み合わせる動的なサイトでも、Astroの「HTMLを返すことに徹する」性格はそのまま活きます。

「静的サイトならAstro一択」という2023年の結論は、3年経っても変わりませんでした。むしろ今は、コンテンツが主役のサイトであれば動的・静的を問わず第一候補です。