先日のcatnoseさんがツイートしていた技術,Vite, Hono, RemixのうちのRemixについてちょい調べてみる.
現状の認識としては,React用のフレームワークであり,Next.jsと競合するものというくらいのもの.
ちなみに,remix公式はこちら
web標準とモダンなweb appのUXにフォーカスしているとデカデカと書いてあるね.Get Startedしてみてもいいけど,触ってみる前にそもそもRemixがどんなものなのかを以下の記事を参考に見てみる.
あと一応Remix DocsにI'm just curioust...なる今の自分にぴったりなリンクを見つけたのでそちらを参考にTechnical Explanationも見てみる.ちなみに以前はphilosophyみたいなページもあったみたい.
だけど今はこちらのIntroductionに統合されてるっぽい.
これらからわかったRemixの思想,特徴をまとめてみる.
Remixの思想
サーバー/クライアントモデルを採用している(要するにサーバとクライアントの分離)
これは明確にNext.jsと異なる
基盤となる技術を抽象化しないこと
過度に機能を盛ることをせず,HTTP, web標準を隠さないようにする
webの基礎となるブラウザ,HTTP,HTMLと共に取り組んでいく
cache管理を開発者に任せたり,web標準のreq,resオブジェクトをそのまま操作するあたりに現れている気がする
JavaScriptを使ってブラウザの動作をエミュレートし,UXを向上させる
リンク踏んだ時のデータフェッチの最適化(今と遷移後のページを比較して必要なデータのみフェッチする)
Remixの特徴
SSGの機能を備えていない
SSG, SSR, CSR, ISRの違いはhttps://zenn.dev/akino/articles/78479998efef55
分散サーバー,分散データベースがユーザの比較的近くでコードを実行するため,素早く静的ページも配信できる
その代表例がCloudflare
動作する環境が限定されない
比較対象のNext.jsではnext/image等デプロイ先をVercelにすることで得られるメリットが大きい
RemixではVercel, Cloudflare Workers, AWS Lambdaなどなど他の環境で動かすためのアダプタが用意されている
ファイルルーティング
NestedRoutingのサポート
正直これはapp routerとの違いはわからん
HTTPヘッダーの詳細な設定
SSGがないためCache headerによって高速な配信を行うための工夫をしろという意図だと思う
独自(?)のステート管理
useLoaderData()というものを使う
各routeのファイルごとにloader関数を定義,呼び出すことでroute下でloadしたデータを利用することができる
Resource Routes(コンポーネント以外のものをルートとして設定できる)
アプリケーションのUIを返す代わりにjson API, pdfの生成などのエンドポイントを提供できる
Nextjsのapi routes強い版みたいな感じ?」
auto mutation(post後に再fetchしなくても自動で更新される)
そのままの意味
action, loaderを利用すればできる
結論を言うと,web標準,HTTPなどの既存技術をなるべく活かし,Remix独自の概念をできるだけ削ぎ落とすという思想の元開発されたフレームワークのように感じた