【Remix】Remix SPAモード

Remix SPAモードについて調べた

remix.run

Remix については以前調べていた

uga-box.hatenablog.com

Remix SPAモード

SPAだけをやりたいとき、Next.jsやRemix自体だと SSRの仕組みも含むのでオーバースペック になってしまう

SPAだけならViteが良さそうであるが、Viteには画面遷移を自前で用意しなければならない

そこで、登場したのがRemix SPAモード

Viteに独自のReact RouterとRemixの機能を組み合わせたもの

使用方法

SPA モード テンプレートを使用

$ npx create-remix@latest --template remix-run/remix/templates/spa

または、Remix Vite プラグイン設定でssr: falseにする

// vite.config.ts
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    remix({
      ssr: false,
    }),
  ],
});

開発中は以下のコマンドでRemix 開発サーバーを使用し、

$ npx remix vite:dev

本番へは以下のコマンドでビルドして、任意のHTTPサーバーにデプロイする

$ npx remix vite:build

最後に、単一ルートから複数のパスを提供できるようにサーバーのルーターを設定する（いわゆる、SPA フォールバック）

感想

最近関わっていないが、確かにSPAだけをやりたい時にどのフレームワークを選ぶべきかは悩む気がする

その中で、Remix SPA は一つの選択肢になりそう

ただ、React Router は過去にバージョンアップで破壊的な変更をしたことがあるので、導入には少し身構えてる

参考

https://speakerdeck.com/nkzn/the-spas-chronicle-reaches-to-remix