ブログをAstroベースに変更した

ちょっとブログを放置しすぎていたので、更新を兼ねてリニューアルしました。 というのを放置していたので、やっと記事化しました。

使用技術

• Next.js -> Astro
• MUI -> molcss（自作 CSS-in-JS）

上記の通り、変更しました。

Astro は、MPA の静的サイトジェネレーターです。動的要素の少ないブログでは、SPA にこだわる必要がないと判断し採用しました。 Astro といえばアイランドアーキテクチャが特徴ですが、クライアント側UIライブラリを使用しなかったので今回はその恩恵はありません。ですが、JS エコシステムに乗っかるために採用しました。自作のゼロランタイム CSS-in-JS を使用し、最小限のクライアント JS 、最小限の CSS となっているのではないでしょうか。

その他、検討した候補について

まとめておきます。

候補1. Next.js (app ディレクトリ)

リニューアル前が Next.js (page ディレクトリ) だったので。 page ディレクトリのダイナミックルーティングでは、記事データをコンポーネントに渡す際、json形式形式である必要がありました。これではReactコンポーネントを渡すことはできず、Markdownに装飾を行う場合は素のCSSを使用するか何かしら別の工夫をする必要がありました（リニューアル前は自作ライブラリdom-parser-reactを作って対応していました）。しかし、app ディレクトリでは記事データをMDXのサーバーサイドコンポーネントとして扱うことで、Reactの一部として扱うことができます。

とはいえ、動的要素の少ないこのブログにReactはパワフル（多機能）すぎるなと思い、却下しました。

候補2. vite-ssr-plugin (現 Vike) + 自作UIライブラリ

Vite でSSR/SSGを扱う際のプラグイン、vite-ssr-plugin を使用するパターン。特定のUIフレームワークへの依存はなく、自分でつなぎ込みを書くのが特徴（有名ライブラリは公式サンプルあり）。久々に確認したら、プラグイン名が Vike に変わっていました。 単にReactだったらNext.jsで良いので、自作UIライブラリの採用を想定…していたのですが、その自作UIライブラリの作成が難航したため候補から外れました。 拙作のfiberworksは動く形にはなっていますが、メイン処理がWeb Workerのため vite-ssr-plugin では動かず断念。

いつかチャレンジしたい。