Remixってなんぞや

nanahiryu
·

先日の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の思想

  1. サーバー/クライアントモデルを採用している(要するにサーバとクライアントの分離)

    • これは明確にNext.jsと異なる

  2. 基盤となる技術を抽象化しないこと

    • 過度に機能を盛ることをせず,HTTP, web標準を隠さないようにする

  3. webの基礎となるブラウザ,HTTP,HTMLと共に取り組んでいく

    • cache管理を開発者に任せたり,web標準のreq,resオブジェクトをそのまま操作するあたりに現れている気がする

  4. JavaScriptを使ってブラウザの動作をエミュレートし,UXを向上させる

    • リンク踏んだ時のデータフェッチの最適化(今と遷移後のページを比較して必要なデータのみフェッチする)

Remixの特徴

  1. SSGの機能を備えていない

    • SSG, SSR, CSR, ISRの違いはhttps://zenn.dev/akino/articles/78479998efef55

    • 分散サーバー,分散データベースがユーザの比較的近くでコードを実行するため,素早く静的ページも配信できる

    • その代表例がCloudflare

  2. 動作する環境が限定されない

    • 比較対象のNext.jsではnext/image等デプロイ先をVercelにすることで得られるメリットが大きい

    • RemixではVercel, Cloudflare Workers, AWS Lambdaなどなど他の環境で動かすためのアダプタが用意されている

  3. ファイルルーティング

    1. NestedRoutingのサポート

      • 正直これはapp routerとの違いはわからん

    2. HTTPヘッダーの詳細な設定

      • SSGがないためCache headerによって高速な配信を行うための工夫をしろという意図だと思う

  4. 独自(?)のステート管理

    • useLoaderData()というものを使う

    • 各routeのファイルごとにloader関数を定義,呼び出すことでroute下でloadしたデータを利用することができる

  5. Resource Routes(コンポーネント以外のものをルートとして設定できる)

    • アプリケーションのUIを返す代わりにjson API, pdfの生成などのエンドポイントを提供できる

    • Nextjsのapi routes強い版みたいな感じ?」

  6. auto mutation(post後に再fetchしなくても自動で更新される)

    • そのままの意味

    • action, loaderを利用すればできる

結論を言うと,web標準,HTTPなどの既存技術をなるべく活かし,Remix独自の概念をできるだけ削ぎ落とすという思想の元開発されたフレームワークのように感じた