Astro という SSG のツールのことを知ったので試してみた。
デファクトっぽい Next.js, Nust.js といった先達に比べて一つのフレームワークに依存せず、好きに混ぜられるらしく大分良さげだったのでせっかくなので置き換えてみた。
最近勉強不足で流行りを追えてなかったのでフレームワークは Svelte にした。
インタラクティブな部分はまだあまり見られていないため Svelte の使用感はわかり切っていない部分もあるが、 SFC の書き方に慣れていればあまり違和感なく対応できそう。
state 関連のAPIが見当たらなかったが、
export let val = "";
で props と state を兼ねて設定できるっぽくて抽象化がエグいなと思った。
Astro は SSG 用のツールとしては非常に便利になっていた。特に Markdown ファイルに対するサポートが手厚い。Next.js のときには parser を別途用意する必要があったが、 Astro に関しては pages ディレクトリ下に md を設置するだけでページが作成できる。外観も他のコンポーネントの slot へ入れることができ、 frontmatter の layout へコンポーネントを指定することで任意のコンポーネントを呼び出せる。逆にコンポーネントからは Astro API 経由で Markdown のデータ取得ができ、直感的にデータが反映しやすいのもとても偉い。何なら MDX にも標準で対応している。
API 周りは(そもそもの仕様として大した機能がないが)ほとんど時間を取られることがなくスムーズに移行ができた。
この調子ならプロダクションにも簡単な静的なサイトあたりから採用してみてもいいんじゃないだろうか。
ハイドレーションって単語をこれの関係で初めて知った。最近全然こちら方面見れてなかったのでかなり置いていかれている気持ちになっている。悲しい。