😊
Remixに SPA Mode がきた
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