Astroという静的webサイト作成のフレームワークを使ってポートフォリオ兼遊び場のwebサイトを構築した。使い勝手がよく、学習コストも高くないツールなのでおすすめです。
Astro の好きなところ
- ReactなどのUIライブラリを使う必要がない。使わなくてもコンポーネントに分割できる。
- 使おうと思えばReactなどのUIフレームワークを使う事もできる。
- astro コマンドを使えばコマンド１つで色々できるように用意されている。例えばReactの追加も
pnpm astro add reactを実行するだけだった。JSのツール周りは色々あって大変なイメージだったので、このあたりに困らないのがかなり助かる。
コンテンツがなくて寂しかったので、今年が何％経過したか表示するバーをつけた。パクリ元はTwitter でたまに見かけるアカウント https://x.com/ProgressBar202_
Hydration と Astroの Islands Architecture
Astroを使うのに特に新しい概念を学習することは少ないけれど、動的な要素を使いたい場合には HydrationとAstroのIslands Architecture については知る必要がある。
HydrationはAstroの用語ではなくJS界隈で広く使われている概念だ。もともとの意味は水分補給とか水和反応(化学用語)らしい。イメージとしては乾いたカップラーメンにお湯を注いでラーメンできあがるように、HTML/CSSにJSを注入して動的なWebサイトをにすることだと理解した。そしてAstroのislands architectureとは、webサイト全体でhydrationを行うのではなく、動的にしたいコンポーネントのみをhydrationするという機構だ。
具体的にはコンポーネントに load: client などの load: ディレクティブをつけることで、コンポーネントのhydrationを指定する事ができる。
トップページでは一部だけを hydration している。必要なところだけhydrationしているのを、海に浮かぶ島に例えているのだろう。
挙動の違いがわかりやすいように、デバッグ用のページを用意した。時計のコンポーネントで React の useEffect フックをつかって表示を更新しているが、load:ディレクティブをつけていないコンポーネントはビルド時の時間で時計が止まっていて更新されない。
おまけ
Year Progress に影響されて、年齢/平均寿命の進捗具合を視覚化するページを用意した。１年の経過よりもダメージが大きい。
SSR
ところでAstroはSSGだけではなくSSRもできるらしい。SSRするならAstro以外のフレームワークを使ったほうがいいのでは、という気もする。どうなんだろうか。
