PerlのバックエンドフレームワークのMojoliciousで、Inertia.jsを利用するためのアダプターをリリースしました。Inertia.js は、バックエンドフレームワークとReactやVueなどで書かれたコンポーネントを接続するための橋渡し的なライブラリです。
バックエンド側に十分資産があるが、全てを置き換えるにはコストがかかる。まずは、クライアント側の体験をよくしたいといった場合にハマるアプローチだと思います。
Mojoliciousなどのバックエンドフレームワークで、ReactやVueなどで書かれたコンポーネントを利用する場合、2つのアプローチがあると思います。1つは、バックエンドフレームワーク独自のテンプレートエンジンに、JavaScriptのコードを混ぜる。もう1つは、バックエンドAPIを叩いて描画はCSR、SSRにする。どちらのアプローチも、バックエンドでテンプレートを選んで値を渡すだけで良かった頃と比べ、アーキテクチャは複雑です。
Inertia.js を利用すれば、この古き良き時代の書きっぷりでありながら、Reactなどのコンポーネントを利用できます。具体的には以下のような具合で、バックエンド側で$c->inertia(COMPONENT, PROPS)と書けば、Inertia.js がcomponentと接続してくれます。
もう一つ良いと思った点は、この接続のためのプロトコルがシンプルなことです。相当シンプルです。
例えば、こう書いたら・・・
$c->inertia('Index', { user => { name => 'Mojolicious' } })
こんなJSONが返されます。
{ "component": "Index", "props": { "user": { "name": "Mojolicious" } }, "url": "/", "version": "c53bc3824540ea95b1e9b495c7a01a9d" }
分かりやすい！
実際、Inertia.jsのプロトコルを見ると、10分くらいで読み終わる内容ですし、Mojoのpluginも100行未満で別のPerlのフレームワークに移植するのも簡単だと思います。
最近、別のプロジェクトで、React Server Comonents をHonoで利用できるようにしましたが、こっちを10分で理解するのは自分にはムズカシイです😅 Inertia.js はCSRになるので、ユーザー体験やSEOを求めるならReact Server Comonents 方が良いと思いますが、Inertia.js で十分という状況はあると思いました。
良かったら使ってみてください！
