monolithic kernel

ブログを Astro で再構築した

ブログシステムのベースとなるフレームワークを GatsbyJS から Astro に切り替えて再構築した。GatsbyJS に乗り換えたのが2019年2月ごろなので、4年半くらい使っていたらしい。

GatsbyJS は導入こそ簡単にできるようになっていたんだけど、使い込んでいくと API の難しさを感じることが多かった。GraphQL も、もしかしたら便利なこともあるのかもしれないけど、少なくともブログを作る程度ではそんなに複雑なクエリをすることはなくて、単に余計なレイヤーが挟まっていて様々な面で使いづらいという印象だった。ServiceWorker の挙動が怪しいのは結局いつまで経っても直らなかった。途中からは ServiceWorker は外してた。

一方で、React を使っていたことは非常によかった。作っていたのは静的な Web サイトなので React は不要という話もあるものの、開発者体験としては GatsbyJS 導入以前とは別物だった。

過去に Next.js を触ったこともあったので、同じく React を使いつつ GatsbyJS と比べるとずっと簡潔な API で取っつきやすい Next.js を採用するというのもかなり有力ではあった。ただ、他の選択肢も調べていく中で、Next.js じゃないのを触ってみたいという加点要素もありつつ、純粋に結構よいんじゃないかと思えたというのもあって Astro を導入することにした。

Astro は JSX っぽいテンプレートとファイル名でのルーティングを持っていて、静的サイトを作るのにあたっては Next.js とほとんど同じような体験で開発できる。getStaticPaths なんかは Next.js と同じメソッド名を使う規約になってる (getStaticProps もひとまとめになっているような仕様で互換性があるわけではないが)。追加での学習コストは限りなく低いと感じた。

開発時の体験としては近いものはあれど、出てくるものは大きく異なる。Astro では基本的には実行時のランタイムなしで HTML だけを吐き出してくれる。先述した静的サイトで React は要らないなんじゃないの、でも React を使ったときの開発者体験は捨てがたい、という要望を叶えてくれる。

基本はゼロランタイムではあるものの、ページの一部でだけ部分的に React や Vue などのコンポーネントを組み込んでインタラクティブな部分を動かすことができるというのもうれしい。インタラクティブな部分をページ内の島に見立ててアイランドアーキテクチャと呼ぶらしい。

# といっても、それをやっちゃうとパフォーマンス上のメリットがかなり減ってしまうと思うのでランタイム無しでやってる。

その他にも、標準の機能だけで静的サイトを作りやすいように、記事の管理や記事中の画像の最適化の仕組みが備わっているのも Next.js とは異なるところ。GatsbyJS はこのあたりは更に充実しているものの、Astro でも必要最低限のものはあるかなという印象。このあたりは今後に期待したい。

まだまだとりあえず移行しただけという状況なので、もう少し使い込んだらそのことについても記事にしたい。

ちなみに、最近 Deno にハマっているので Fresh も気になったのだが、やっぱり Node とは圧倒的なエコシステムの差があるよねというのに加えて、アイランドで使えるのが Preact だけというのもあって飛び込む勇気を持てなかった。Astro を使ってしまえば TypeScript は付いてくるので、そういった意味では Deno だからこそのよさはそこまで感じられないのかなとは思った。


Related articles