はじめましての人ははじめまして。そうでないひとはお久しぶりです。猫ロキP(@deflis/id:deflis55)です。
今日はとりとめもない思考実験の日記です。
最近はネット小説のエディタを作ろうと思って、いろいろ技術検証やら環境構築やらを行っています。
このエディタで使おうと思う技術はいろいろあって中心にReactを据えることは決めたんですが、いざSPAを作ろうとすると大きな壁にぶちあたりました。
現代において、Reactで開発しようと思うと真っ先に選択肢に挙げられるのはNext.jsだと思います。 ですが、Next.jsではSPAを開発するときにいくつか不便なところがあります。
わかりやすく、一番大きい壁としてはLocalStorageを扱うことが出来ないところです。LocalStorageを活用したアプリケーションを作成した場合、上手くやらないとHydrationエラーになってしまうのです。
そもそもNext.jsというかServer Componentのメリットとはなんだったかというところに立ち返ると、前述したようなLocalStorageで完結するような完全なSPAではServer Component(Next.js)を利用するメリットはほとんどありません。
クライアントサイドとサーバサイドの同期のような場面が重要なアプリケーションではこれらの特徴はむしろ足かせになり得ます。 なぜならNext.jsは各所にモンキーパッチを当てており、App RouterのClientモードでもいったんSSRしてしまい様々なエラーを引き起こします。 例えば、GraphQLクライアントのApollo ClientはApp Router対応が出ていますが、今現在ではまだExprerimental状態*1です。
ならば、Next.jsを使わないやり方、例えばViteで組むなどが考えられます。ですが、ルーティングを作るのが大変面倒です。 Next.jsに慣れきった現代のReactエンジニアにとってルーティングはパスによって自動で生成されるものとなっています。 ですので、何かしらの仕組みでファイルベースルーティングを自動生成してほしいというのが人情ではないでしょうか。
そこで使えるライブラリが、この Generoutedです。
これは、ReactとSolidに対応したファイルベースルーティングを行うViteのプラグインです。 ルーティングのバックエンドにはReact RouterとTanstack React Router、およびSolid Routerが使えるそうです。（React Rouerしか試したことはありません）
これを使うことによって素に近いViteを使いながらNext.jsのような書き心地でSPAを作ることが出来ます。
useParams の自動生成版などもあるので、ある意味ではNext.jsより優れているかもしれません。
このグッズを使うことによって、現代的なやり方でSPAを作ることが簡単にできるようになりました。 いま、あえて重厚なフレームワークをつかわない。そんな選択肢もあっていいのではないでしょうか？
というのを、考えていた矢先なんですが、RemixにSPAモードが搭載されたという話が流れてきました。
SPAを作るならばこの選択肢もありなのではないでしょうか。 いままでNext.jsか素のViteかという極端な開発をしていたんですが、これからはRemixも選択肢として持てるようになっておこうと思います。
