今さら Astro について調べて、入門してみる

Thought Works の Technology Radar で Astroが Trialに来ていたので、今回はAstroに入門してみます！
Technology Radar

Astroとは？

Astroとは、Webフレームワークです. ブログ、マーケティングサイト、Eコマースなどのコンテンツドリブンなサイトを作るときに適しているようです.
特徴としては、JSのオーバーヘッドが少ないことが挙げられるようです.
確かに、コンテンツドリブンなサイトだったら、フロントの画面で複雑な機能を提供しなくていいので、JSを削減しやすそうです！
コンセプト

Reactのような書き方をするが、Next.jsと違って Reactのフレームワークというわけではありません.

メリット

1. Reactのようにコンポーネントベースで書ける. 書き方が少し変わるだけ.
2. React, Vue, Svelteのようなフレームワークを組み込むこともできる.
3. デフォルトでは、全てサーバー側で処理する＆JSをほとんどクライアントに送信しないので、パフォーマンスがいい.
   (It should be impossible to build a slow website in Astro. と、公式ドキュメントに書いてあるほどです)

Next.jsと比べて何が優れているのか

サーバーサイドで実行しようとしているか、クライアントサイドで実行しようとしているかが、大きな違いのようです. (しかし、最近はNext.jsもほとんどの処理をサーバー側でやる方向に動いているため、違いが薄くなるかも?)
Astroは、RailsやPHPのようなサーバーサイドフレームワークとして作成されました. そのため、これまでのSPA(Single Page App)の流れと違い、MPA(Multi Page App)となっています.

(参考)

サーバー側で処理することを忘れて、クライアント用のイベントリスナーとかを使っちゃいそうになりますね. Next.js app router の時のように、そこら辺は使わないように意識する必要がありそうです.

ブログなどのインタラクションが少ない、コンテンツメインのサイトを作成する際は、Astroを使っていきたいですね！

さまざまなファイルを書くだけで表示できる

Astroでは、pages配下に書かれた構造が、ルーティングとなります. これは、Next.jsのpage router の時と同じです.
ここからが驚くべきところで、例えば /posts/post-1.md のようなMarkdownファイルを作成したとします. なんとこれだけで、post-1.md に書いた内容がいい感じにブラウザで表示できちゃうのです.
コンテンツに特化してるだけありますね. シンプルなブログなら本当に爆速で作成できます.
参考

感想・まとめ

Astroはとにかくサーバーサーバーサーバー.
フロントエンド用語がたくさん出てくるので、クライアント脳で考えていましたが、実態はサーバー側で動かすことをメインにしてる(Rails, PHPのように)フレームワークでした.
おもしろそうです！