Zenn
😊

Remixに SPA Mode がきた

2024/01/14に公開
SPA
Remix
tech

Remix v2.5.0 で SPA Mode がサポートされました。(unstable)

SPA Mode 導入の背景

Remix は React をベースとし、Web 標準に基づいた API で構築されるフルスタックフレームワークです。

Remix はリリース当初からサーバーサイド環境で動作することを前提としてきましたが、以下のようにサーバーを用意せずアプリケーションを構築することが有効な場合もあります。

  • サーバーを管理したくない
  • Github Pages やその他 CDN で静的ファイルとしてアプリケーションを配信したい
  • Node.js サーバーを動作させたくない
  • React Router で構築されたアプリケーションを Remix に migrate したい
  • サーバーレンダリングでは実現できないユースケースが存在するアプリケーションを開発したい

上記のようなユースケースを満たすため、実験的に SPA Mode が導入されました。

SPA Mode の概要

Remix の SPA Mode では以下のような機能を利用できます。

  • ファイルベースルーティング
  • route.lazy による route に基づく自動的なコード分割
  • route モジュールの事前読み込みを行う <Link prefetch> のサポート
  • <Meta> / <Links> による <head> タグの管理

SPA Mode ではサーバーランタイムを実行することはなく、データ読み込みとミューテーションは Client Data を利用します。

SPA Mode の使い方

ドキュメントではテンプレートが紹介されているので、アプリケーションの雛形をすぐに構築できます。

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

構築済みのアプリケーションを SPA Mode にする場合は vite.config.ts に unstable_ssr: false を設定します。

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

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

開発環境

開発時は従来の Remix アプリケーションと同様、以下のコマンドで実行でき、HMR/HDR を有効化できます。

remix vite:dev

本番環境

以下のコマンドでビルドできます。ビルドの成果物はデフォルトで build/client/index.html に出力されます。

remix vite:build

ビルドで出力された client ディレクトリを HTTP サーバーで起動すれば、動作させることができます。

npx http-server -p 3000 build/client/

SPA Mode の注意点

ドキュメントには SPA Mode を動かす上でいくつかの注意点がまとめられています。

  • Vite と Remix Vite plugin を利用している場合のみ SPA Mode が動作する
  • headersや loader, action のようなサーバーで動作する API は利用できない
  • HydrateFallback は root.tsx からのみ export することができる
  • clientLoader / clientAction で serverLoader / serverAction を利用することはできない

参考

Discussion