Astro

なぜ生まれた？: 文章が中心のサイトでも、ページ全体を JavaScript のアプリとして送り、ハイドレーションしていた。
何を解決した？: ページをビルド時に HTML にして JavaScript を外し、印を付けた部品にだけ送る形を既定にした。
何を残した？: 在庫のようにリクエストごとに変わる中身は静的な出力では扱えず、サーバーで描く道を足していった。

登場: 2021年6月8日
作者: Fred K. Schott、Nate Moore
状態: 現役

Astro が生まれる前

サイトをまたいで React を使い回す賭け

Astro を作った Fred K. Schott は、2022年4月11日のポッドキャスト「ShopTalk Show」で、ここに至る道を振り返っています。2015〜16年ごろ Google の Chrome チームにいて、import/export（ES Modules、ESM）がブラウザに入りはじめるのを見たのが始まりで、その後 Pika、ESM でパッケージを配る CDN の Skypack、ビルドツールの Snowpack を作りました。

Skypack には賭けがありました。Skypack を使うサイトがみな同じ版の React を読み込めば、ブラウザは1つのキャッシュをサイトをまたいで使い回せ、Skypack のサイトは90%速く読み込める、というものです。ところがブラウザは、サイトがキャッシュの中身を探れることは利用者を識別する手がかり（フィンガープリンティング）になるとして、キャッシュをサイトごとに分けはじめました。

“we kind of didn’t know what to do with Skypack” （Skypack をどうすればいいのか、わからなくなっていた）

何にでも差し込める柔軟さは強みだった一方で、開発者の仕組みのごく一部しか受け持たないので、人を惹きつける話ができなかった、と Fred は続けます。

“Everywhere where we get stuck is when we’re trying to be less opinionated or more pluggable” （行き詰まるのはいつも、自分たちの考えを控えめにして、差し込みやすくしようとしたときだった）

Astro は、考えを持ったツールを上から下まで作る機会だった、というのが本人の振り返りです。どれも発表から10か月後に語られたことです。

文章のサイトにも増え続ける JavaScript

一方で、ページの作り方は逆の方向に進んでいました。2021年6月8日の発表記事は、こう書き出しています。

“Unfortunately, modern web development has been trending in the opposite direction—towards more.” （あいにく、いまの Web 開発は逆の方向、つまり「もっと多く」に向かっている）

当時の Next.js のドキュメント（2021年12月）は、どのページもあらかじめ HTML にし、そのページに要る JavaScript をブラウザで動かして操作できるようにすると書き、“(This process is called hydration.)”（この処理をハイドレーションと呼ぶ）と添えています。ハイドレーションでは、ページの部品をブラウザでもう一度動かします。動くのがボタン1つだけのブログの記事でも同じです。

Next.js や Gatsby があるのに、なぜもう1つフレームワークを作ったのか

発表記事は、ほかのフレームワークを名指ししていません。名前が出るのは2021年8月26日のドキュメントです。

“Next.js, Gatsby, and other JavaScript frameworks cannot support partial hydration because they imagine your entire website/page as a single JavaScript application.” （Next.js や Gatsby などは、部分的なハイドレーションができない。サイトやページ全体を1つの JavaScript のアプリケーションと考えているからだ）

2022年の対談で Fred は “Next.js is great software.”（Next.js はすばらしいソフトウェアだ）と言ったうえで、問題を別のところに置いています。

“the static site story has really just been a lot of old technology hanging around and just hasn’t seen the same investment.” （静的なサイトのほうは、古い技術が残っているだけで、同じだけの投資を受けてこなかった）

SPA の道具は10年かけて成熟したが、複数のページからなるサイトの道具はこれからだ、という見方です。同じ対談では、Next.js や Gatsby が React を土台にしたことを “retrofitting a client-side API … down to the server”（ブラウザのための API を後からサーバーに持ち込むこと）とも呼んでいます。 Astro は、投資が SPA の側に偏るなかで、文章を読ませるサイトの側を作り直すものとして語られています。

誕生

npm の登録、リポジトリ、そして発表

npm には2021年3月13日に astro 0.1.0 が登録されています。ただし説明は “coming soon” で、リポジトリの記載も無い、中身の無い登録でした。 GitHub のリポジトリ（2026年10月時点の名前は withastro/astro）は3月15日に作られ、Skypack のメールアドレスを使う Matthew Phillips が「initial commit」を入れています。その1時間ほどあとには「magicthing -> astro」というコミットがあります。

公開の発表は2021年6月8日の「Introducing Astro: Ship Less JavaScript」で、署名は Fred Schott と Nate Moore の2人です。記事は Astro を “a new kind of static site builder”（新しい種類の静的サイトビルダー）と紹介し、これが最初の公開ベータで、それまでに300人を超える開発者が非公開のベータに加わったと書いています。作ったのは Snowpack と Skypack のオープンソースの開発者たちで、MIT ライセンスで公開されました。この記事は、使える形で人に示したこの発表の日を登場としています。

なぜ「JavaScript を出さない」を初期設定にしたのか

発表の最初の1文が、答えになっています。

“There’s a simple secret to building a faster website — just ship less.” （速いサイトを作る簡単な秘訣がある。送るものを減らせばいい）

Astro はページ全体をビルドのときに HTML にし、仕上がったページから JavaScript を “by default”（既定で）すべて取り除きます。発表記事は、ソフトウェアの設計でいう「成功の落とし穴」（正しいことは楽に、まちがったことは面倒にする作り）を設計の原則に挙げ、“It should be difficult to build a slow website.”（遅いサイトを作るほうが難しくあるべきだ）と書きました。

ただし、すべてのサイトに向くとは言っていません。

“We are confident that an HTML-first, JavaScript-only-as-needed approach is the best solution for the majority of content-based websites.” （HTML を先に置き、JavaScript は要るときだけという方法が、中身を読ませるサイトの大半には最善だと確信している）

既定を「JavaScript なし」にしたのは、対象を文章が中心のサイトに絞ったうえでの選択です。

動く部品だけを島にする

画像のカルーセルやショッピングカート、検索の入力補完のように、ブラウザで動く部品は残ります。発表記事は、そうした部品だけを JavaScript で読み込み、残りは HTML のままにすると書き、この形を “islands architecture”（アイランドアーキテクチャ）と呼びました。

“We didn’t coin the term, but Astro may have perfected the technique.” （この言葉を作ったのは私たちではないが、Astro はこの手法を完成させたかもしれない）

この考え方は2020年8月11日に Jason Miller が文章にしていて、言葉の由来はそちらの記事で扱います。「完成させたかもしれない」は、作った本人たちの自己評価です。

Astro での印の書き方は、最初の数か月で変わりました。発表のころの例では <ReactCounter:visible /> のように部品の名前の後ろに :visible を付けていましたが、7月8日の 0.17.0 で <Button client:load /> の形になります。 CHANGELOG はその理由を、<MobileMenu client:media="(max-width: 40em)" /> のように、条件を渡せる書き方への道を開くためと書いています。古い書き方も、しばらくは使えました。

なぜ複数の UI ライブラリの部品を混ぜて使えるようにしたのか

発表記事は、最初の特徴に “Bring Your Own Framework”（使うフレームワークは持ち込みで）を挙げ、React・Svelte・Vue・Preact・Web Components・ただの HTML と JavaScript で作れるとしました。発表のころの例には、React・Preact・Vue・Svelte の4つのカウンターを1つの Markdown のページに並べたものがあります。

Fred は2022年に、これは “not that radical”（そこまで過激な話ではない）と話しています。「React を選んだら全部 React」という世界の外、たとえば WordPress の開発者に聞けば、表示の側にフレームワークを足すのは当たり前だ、という理由です。 Astro は Hugo・Jekyll・Eleventy から多くを借りていて、だから「メタフレームワーク」ではなく「サイトビルダー」と呼んできた、とも言っています。 ページを組み立てるのは Astro で、動く部品はどの UI ライブラリで書いてもよい、という分け方です。2022年8月の 1.0 では、Solid と Lit も並びます。

コードで見る違い

ブログの記事の下に「いいね」のボタンを1つ置くページで比べます。どれもこの記事のための作例で、LikeButton は React で書いた同じ部品、レイアウトは省いています。

import LikeButton from '../../components/LikeButton'

export default function Post() {
  return (
    <article>
      <h1>はじめての投稿</h1>
      <p>本文は文章だけで、動くのは下のボタンだけです。</p>
      <LikeButton />
    </article>
  )
}

---
import LikeButton from '../../components/LikeButton.jsx';
---
<article>
  <h1>はじめての投稿</h1>
  <p>本文は文章だけで、動くのは下のボタンだけです。</p>
  <LikeButton client:visible />
</article>

Next.js の側は、ページ全体が1つの React の部品なので、見出しや本文も含めてブラウザでハイドレーションします。 Astro の側は、client:visible を付けた LikeButton だけが、画面に入ったときに JavaScript を読み込みます。印を外せば、ボタンも HTML として描かれるだけで、JavaScript は送られません。「どこを動かすか」をページの側で部品ごとに書くのが、Astro の書き方です。

2021年8月のドキュメントが挙げた印は次の5つです。

印	いつ動かしはじめるか
`client:load`	ページを読み込んだとき
`client:idle`	ブラウザの手が空いたとき（`requestIdleCallback`）
`client:visible`	部品が画面に入ったとき（`IntersectionObserver`）
`client:media={QUERY}`	メディアクエリに合ったとき（`matchMedia`）
`client:only`	ページを読み込んだとき。ビルドのときには描かない

なぜ広まったのか

静的なファイルなら、どこにでも置ける

Astro がビルドで出すのは静的なファイルの束です。2022年の対談でホストの Chris Coyier は、それを Netlify・Cloudflare Pages・DigitalOcean の App Platform といった新しい世代のホスティングにそのまま載せられ、Astro とホスティングの両方の使い勝手を得られる、と話しています。これは聞き手の側の評価です。

Snowpack を降りて Vite に乗る

最初の Astro は、自分たちの Snowpack の上で動いていました。2021年10月6日の 0.21 の予告で、チームは “replacing Snowpack with Vite going forward”（これからは Snowpack を Vite に置き換える）と書き、“This was a hard decision for us to make.”（私たちにとって難しい決断だった）と添えています。11月19日の 0.21 が “A new build engine, powered by Vite”（Vite で動く新しいビルドエンジン）です。

Fred は2022年に、“we were doing what Vite was doing, and Vite just did it way better.”（Vite がしていたことを私たちもしていたが、Vite のほうがずっとうまくやった）と言い、主なメンテナーはみな Astro に移ったと話しています。Snowpack の README には2022年4月20日付けで、もう活発には保守されていないという注記が入りました。 ビルドの土台は Vite に任せ、Snowpack を作っていた人たちは Astro の開発に移りました。

寄付ではなく会社で支える

発表記事は、Astro はずっと無料だとしつつ、長く開発を続けるにはお金が要り、“donations alone aren’t enough”（寄付だけでは足りない）と書き、1年かけて事業の形を探すとしていました。 2022年4月の対談で Fred は、自分は “the CEO of the company we formed a couple of months ago”（数か月前に作った会社の CEO）だと名乗っています。

残した課題と、次に来たもの

「この靴は在庫ある？」

すべてをビルドのときに HTML にする形は、リクエストのたびに変わる中身に弱くなります。2022年の対談で Fred は、マーケティングのサイトなら完全に静的でよいが、ネットショップでは表示の前にブラウザが “Are these shoes in stock?”（この靴は在庫ある？）と確かめることになり、データを全部ブラウザで取りに行くのもよい体験ではない、と話しました。静的であることにこだわり続けると、大きなサイトに広げられないという見方です。

本当に「Astro は静的サイト専用」なのか

同じ対談で Fred は、Astro の既定は静的サイトのままで、必要になったらホスティングに合わせたアダプターを1行足せば、サーバーで描くサイトになると説明しています。その流れは版を追って広がりました。

版	日付	出し方
1.0	2022年8月9日	サーバーで描く出力が安定版に。“Astro is no longer just a static-site builder.”（Astro はもう静的サイトを作るだけの道具ではない）
2.0	2023年1月24日	hybrid rendering で、静的なページとサーバーで描くページを1つのサイトに混ぜる
4.12	2024年7月18日	Server Islands の最初の実験版
5.0	2024年12月3日	hybrid を static に統合。アダプターを入れれば、ルートごとにサーバーで描ける

5.0 の発表は “Astro is still static by default!”（Astro はいまも既定では静的だ）と書き、Server Islands を “an evolution of the islands architecture concept”（アイランドアーキテクチャの考え方の発展）と呼んでいます。ブラウザで動かす島に加えて、サーバーで描く部分も島として扱う、という広げ方です。 静的な出力は「専用」ではなく「既定」で、サーバーで描く道は 1.0 から本番で使えます。 同じ理由で、「Astro は JavaScript をまったく送らない」も正確ではなく、client: の印を付けた部品には JavaScript が送られます。

島が増えたら

島の形は、動く部品が少ないほど得をします。2022年の対談でホストの Chris Coyier は、すべての部品にブラウザで動かす印を付けるなら Astro は向いておらず、Next.js を使うべきだろうと言いました。Fred もその限界を認め、Next.js は “really good at that other side of the spectrum that we’re not trying to tackle”（私たちが取り組もうとしていない側をとても得意としている）と答えています。冗談まじりの “Anything can be an island, including your entire page.”（ページ全体も含めて、何でも島にできる）という言葉もありますが、動く部分の多いアプリでは、島の形の得は小さくなります。

2026年10月時点の立ち位置

2026年10月時点で最新の版は、10月15日に発表された 7.4 です（npm の latest は 7.4.4。10月29日に確かめた）。6月22日の 7.0 では Vite 8 に移り、Rust で書いたコンパイラーが入りました。

2026年1月16日、Cloudflare は Astro を開発する The Astro Technology Company の買収を発表しました。Astro は MIT ライセンスのままです。同社の CEO の Fred Schott は、Cloudflare のプレスリリースでこう述べています。

“Joining Cloudflare allows us to accelerate Astro’s development faster and on a much larger scale” （Cloudflare に加わることで、Astro の開発をより速く、はるかに大きな規模で進められる）

指標	数字	出典
npm の週間ダウンロード数	9,022,948	npm（2026年10月21日〜27日）
npm の月間ダウンロード数	29,052,855	npm（2026年9月28日〜10月27日）
GitHub のスター（withastro/astro）	63,565	GitHub（2026年10月29日）
使った開発者のうち、また使いたい人の割合（Admired）	62.2%	Stack Overflow Developer Survey 2025

npm の週間ダウンロード数は、2025年12月1日の週の 918,114 から、10か月あまりで約10倍になっています。ダウンロード数は自動のビルドなども数えるので、使う人の数そのものではありません。 State of JavaScript 2025 は、メタフレームワークの分野で Next.js が使う人を増やして首位を保つ一方、満足度は下がり、満足度の比では “a 39% gap with leader Astro”（首位の Astro と39%の差）があると書きました。Astro については、ほとんど知られていなかったところから数年で “serious contender”（本気の競争相手）になったとしています。 使う人の多さでは Next.js が首位を保ち、使った人の満足度では Astro が2025年の調査で首位に立っています。

まとめ

2021年、文章が中心のサイトでもページ全体を JavaScript のアプリとして送り、ハイドレーションする作り方が広まっていました。Skypack の賭けが行き詰まった Fred Schott たちは、考えを持ったツールとして Astro を作り直しました。
2021年6月8日の発表で、ページをビルドのときに HTML にして JavaScript を外す形を既定にし、client: の印を付けた部品だけを島として動かしました。UI ライブラリは React・Vue・Svelte などから選べます。
静的なファイルを新しいホスティングにそのまま載せられ、ビルドの土台は2021年に Snowpack から Vite に替えました。会社を作って開発を支え、2026年1月に Cloudflare に加わりました。
在庫のように変わる中身は静的な出力では扱えず、1.0 でサーバーでの描画、2.0 で混在、2024年に Server Islands を足しました。いまも既定は静的です。
2026年10月時点の最新は 7.4 で、npm の週間ダウンロード数は約900万です。

年表

2021年3月13日
npm に `astro` 0.1.0 が登録される。説明は「coming soon」で、中身の無い登録だった registry.npmjs.org
2021年3月15日
GitHub にリポジトリ（のちの withastro/astro）が作られ、Matthew Phillips が「initial commit」を入れる github.com
2021年6月8日
Fred Schott と Nate Moore が「Introducing Astro: Ship Less JavaScript」で、最初の公開ベータとして発表する astro.build
2021年7月8日
0.17.0 で、部品を動かす印の書き方が `<Button:load />` から `<Button client:load />` に変わる github.com
2021年11月19日
0.21 で、ビルドの土台を自分たちの Snowpack から Vite に替える astro.build
2022年8月9日
1.0 が公開され、サーバーで描く出力が本番で使える安定版になる astro.build
2023年1月24日
2.0 で、Content Collections と、静的なページとサーバーで描くページを混ぜる hybrid rendering が入る astro.build
2024年7月18日
4.12 で、Server Islands が最初の実験版として入る astro.build
2024年12月3日
5.0 で hybrid が static に統合され、既定はそのまま静的な出力になる astro.build
2026年1月16日
Cloudflare が、Astro を開発する The Astro Technology Company の買収を発表する。Astro は MIT ライセンスのまま blog.cloudflare.com
2026年6月22日
7.0 が公開され、Vite 8 に移り、Rust で書いたコンパイラーが入る astro.build

系譜

前

この技術が出てくる物語

サーバーとブラウザの振り子

同時代の出来事

2020年5月5日Google が Web Vitals（Core Web Vitals）を発表 blog.chromium.org
2020年8月11日アイランドアーキテクチャ

出典

一次Introducing Astro: Ship Less JavaScript（Fred Schott・Nate Moore, Astro Blog, 2021-06-08） astro.build 保存版
一次510: Fred Schott on the Past, Present, and Future of Astro（ShopTalk Show の転写, 2022-04-11） shoptalkshow.com
一次Partial Hydration in Astro（Astro のドキュメント、2021-08-26 のコミット e0c39fb） github.com
一次astro の CHANGELOG.md（0.17.0、コミット d46746c） github.com
一次Astro 0.21 Preview: Vite + WASM = ⚡️（Astro Blog, 2021-10-06） astro.build
一次Astro 0.21（Astro Blog, 2021-11-19） astro.build
一次Astro 1.0（Astro Blog, 2022-08-09） astro.build
一次Astro 2.0（Astro Blog, 2023-01-24） astro.build
一次Astro 4.12（Astro Blog, 2024-07-18） astro.build
一次Astro 5.0（Astro Blog, 2024-12-03） astro.build
一次Astro 7.0（Astro Blog, 2026-06-22） astro.build
一次Astro 7.4（Astro Blog, 2026-10-15） astro.build
一次Snowpack の README（2022-04-20 の注記） github.com 保存版
一次Basic Features: Pages（Next.js のドキュメント、2021年12月） nextjs.org 保存版
一次Astro is joining Cloudflare（Cloudflare Blog, 2026-01-16） blog.cloudflare.com
一次Cloudflare Acquires Astro to Accelerate the Future of High-Performance Web Development（Cloudflare プレスリリース, 2026-01-16） cloudflare.com
一次withastro/astro の最初のコミット（initial commit、2021-03-15） github.com
一次npm registry（astro） registry.npmjs.org
一次npm のダウンロード数（astro、直近1週間） api.npmjs.org
二次Stack Overflow Developer Survey 2025（Technology） survey.stackoverflow.co
二次State of JavaScript 2025（Meta-Frameworks） 2025.stateofjs.com