はじめに
前回は記事の変換処理や CSS 周りを変更したが、今回はフレームワークを入れ替えた。ついでにはてなスターを追加したり、トップページの描画を軽くしたりしたので記録しておく。
Diff
フレームワークを変更
Next.js はこのプロジェクトに Too much であるなと常に思っていた（前回記事にも書いたはず）
長年の FF こと LaPh に以前 TanStack Start を勧められたので LLM に移行させて終わってすぐこいつが rshono を勧めてきやがった。
パフォーマンス計測した感じも rshono が良さげであったので採用とした。
1 日に 2 回フレームワークを変えるなど…
rshono は Hono と Rspack、React Server Components を組み合わせたフレームワーク。React を使った画面は引き継ぎつつ、Next.js から移行した。
このサイトは GitHub Pages で配信しているので、本番でアプリケーションサーバーを動かす必要はない。記事を Org-mode で書いて Markdown に変換し、ビルド時に HTML を生成する流れもそのまま。rshono 版ではページ遷移に使う RSC のデータ（Flight）も静的ファイルとして出力し、ブラウザーからの取得先を index.rsc に向ける処理を追加した。この辺が GitHub Pages に載せるための対応。
計測結果
同じ 22 記事・66 ページを使って、実際のサイトを Next.js、TanStack Start、rshono でそれぞれ動かした。以下はビルド各 3 回、ページ表示各 5 回の中央値。LCP はページ内の大きなコンテンツが表示されるまでの時間で、小さいほど早い。
| 指標 | Next.js | TanStack Start | rshono |
|---|---|---|---|
| ビルド（フレームワークのキャッシュ削除） | 5.89 秒 | 1.42 秒 | 1.87 秒 |
| 日本語記事の LCP | 380 ms | 612 ms | 332 ms |
| 日本語記事の JS 転送量（gzip） | 320.6 KiB | 295.5 KiB | 262.8 KiB |
計測したのは 10 月 1 日。Next.js 16.3.6、TanStack Start 1.168.60、rshono 1.0.0-rc.23 を使った。M4 の Mac、Node.js 26.5.0、Chrome 154 で、CPU を 4 倍スロットル、下り 1.6 Mbps、遅延 40 ms に設定している。同じ gzip 対応のローカル静的サーバーから配信し、外部埋め込みへの通信は止めた。JS 転送量は表示開始から 15 秒以内に取得が完了した分。
ビルド時間には共通の記事・OGP 生成を含めていない。また、Next.js だけ標準の型検査が含まれるので、コンパイラー単体の速さを比べた数字ではない。あくまでこのサイトをそれぞれの構成で動かした結果。
ビルドは TanStack Start のほうが速かったが、記事の初回表示と JS 転送量は rshono が良かった。ただしトップページのレイアウトずれは rshono のほうが大きく、何でも勝っていたわけではない。
Hono JSX とも比較した（10 月 7 日追記）
10 月 5 日には、一度 hono/jsx と hono/jsx/dom を使う構成に変わっていた。こちらは React と rshono を使わない構成。
Hono JSX 版では記事本文をビルド時に HTML にして、テーマ切り替えなどの操作が必要な部分を hono/jsx/dom で動かしていた。トップページの WebGL も、最初にトップページを開いた時に読み込むようになっていた。
こちらは 10 月 2 日に行った別の追測で、同じ日本語記事の JS 転送量が rshono の 262.9 KiB から Hono JSX の 24.9 KiB に減った。CPU・回線の制限は上と同じで、各 5 回の中央値。ただし観測時間は 5 秒で、同じ gzip 対応のローカル HTTPS サーバーから配信している。この削減には WebGL の読み込みを遅らせた効果も含まれる。
一方、その追測での LCP は 328 ms から 364 ms に増え、一覧から記事へ遷移して本文の DOM が揃ってから 2 フレーム後までの時間も長くなった。転送量はかなり減ったが、表示まで全部速くなったという話ではない。
今回は記事の表示と遷移の速さを優先して、rshono に戻した。記事生成のキャッシュや OGP 生成など、フレームワークとは独立した改善は残している。
はてなスターを追加
https://songmu.jp/riji/ を見ているとはてなブログでなくてもはてなスターを追加できることに気づいた。
はてなインターンに行ったもののはてなブログを最近常用していないのはよくないなと思い、折衷案としてはてなスターを追加した。
記事のタイトルの下に置いてある。記事ごとの URL とタイトルを渡しているので、それぞれの記事にスターを付けられる。ページ全体を再読み込みせずに別の記事へ移動した場合も、移動先のスターを表示するようにしている。
これがインターン先への媚びや！（最悪）
軽くした
トップページの ASCII 表示で、CPU 側で行っていた変換処理を GPU に移した。以前は毎フレーム画像を getImageData で読み出し、明るさに応じた文字を選んで Canvas に描き直していた。今はあらかじめ用意した文字の画像を使い、文字の選択と合成をシェーダーで処理している。
このサイトのトップページは重い・不便で知られているが、ただ不便になった
BudouX 消した
BudouX は、日本語などの文章を意味のまとまりで区切って、折り返し位置を調整するためのもの。記事の本文にも使っていたが、外してブラウザー標準の折り返しに戻した。
スマホで読んでたらキモいのでやめました
おわりに
見た目にはそんなに変更ないわ