Future Flags

フューチャーフラグ

以下のフューチャーフラグは安定しており、採用可能です。フューチャーフラグの詳細については、開発戦略を参照してください。

Viteプラグイン

背景

Remixは独自のクローズドコンパイラ（現在は「クラシックコンパイラ」と呼ばれる）を使用せず、代わりにViteを使用します。Viteは強力で、パフォーマンスが高く、拡張可能なJavaScriptプロジェクト開発環境です。パフォーマンス、トラブルシューティングなどの詳細については、Viteのドキュメントを参照してください。

これはフューチャーフラグではありませんが、新機能と一部の機能フラグはViteプラグインでのみ利用可能で、クラシックコンパイラは次のメジャーバージョンのRemixで削除される予定です。

👉 Viteをインストール

npm install -D vite

コードの更新

👉 Remixアプリケーションのルートディレクトリでremix.config.jsをvite.config.tsに置き換え

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

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

サポートされているRemix設定オプションのサブセットは、プラグインに直接渡す必要があります：

export default defineConfig({
  plugins: [
    remix({
      ignoredRouteFiles: ["**/*.css"],
    }),
  ],
});

👉 <LiveReload/>を削除し、<Scripts />を保持

import {
  LiveReload,
  Outlet,
  Scripts,
}

export default function App() {
  return (
    <html>
      <head>
      </head>
      <body>
        <Outlet />
        <LiveReload />
        <Scripts />
      </body>
    </html>
  )
}

👉 tsconfig.jsonの更新

tsconfig.jsonのtypesフィールドを更新し、skipLibCheck、module、moduleResolutionが正しく設定されていることを確認してください。

{
  "compilerOptions": {
    "types": ["@remix-run/node", "vite/client"],
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "Bundler"
  }
}

👉 remix.env.d.tsの更新/削除

remix.env.d.tsから以下の型宣言を削除してください：

 /// <reference types="@remix-run/dev" />
 /// <reference types="@remix-run/node" />

remix.env.d.tsが空になった場合は、削除してください：

rm remix.env.d.ts

パスエイリアスの設定

Viteはデフォルトでパスエイリアスを提供しません。この機能に依存している場合（例：~をappディレクトリのエイリアスとして定義）、vite-tsconfig-pathsプラグインをインストールして、Remixコンパイラの動作に合わせてViteでtsconfig.jsonのパスエイリアスを自動的に解決できます：

👉 vite-tsconfig-pathsのインストール

npm install -D vite-tsconfig-paths

👉 Vite設定にvite-tsconfig-pathsを追加

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

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

@remix-run/css-bundleの削除

ViteにはCSS副作用インポート、PostCSS、CSSモジュール、その他のCSSバンドル機能のサポートが組み込まれています。RemixのViteプラグインは、バンドルされたCSSを関連するルートに自動的に追加します。

Viteを使用する場合、@remix-run/css-bundleパッケージは不要です。そのcssBundleHrefエクスポートは常にundefinedになるためです。

👉 @remix-run/css-bundleのアンインストール

npm uninstall @remix-run/css-bundle

👉 cssBundleHrefへの参照を削除

 import { cssBundleHref } from "@remix-run/css-bundle";
  import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno

  export const links: LinksFunction = () => [
   ...(cssBundleHref
     ? [{ rel: "stylesheet", href: cssBundleHref }]
     : []),
    // ...
  ];

linksで参照されるCSSインポートの修正

links関数でCSSを参照している場合、Viteの明示的な?urlインポート構文を使用するように対応するCSSインポートを更新する必要があります。

👉 linksで使用されるCSSインポートに?urlを追加

import styles from "~/styles/dashboard.css";
import styles from "~/styles/dashboard.css?url";

export const links = () => {
  return [
    { rel: "stylesheet", href: styles }
  ];
}

Tailwind CSSまたはVanilla Extractの移行

Tailwind CSSまたはVanilla Extractを使用している場合は、完全な移行ガイドを参照してください。

Remixアプリケーションサーバーからの移行

👉 dev、build、startスクリプトの更新

{
  "scripts": {
    "dev": "remix vite:dev",
    "build": "remix vite:build",
    "start": "remix-serve ./build/server/index.js"
  }
}

Single Fetch

背景

Remixは、ネストされたルートローダーを並行して実行することで、優れたパフォーマンスを実現してきました。しかし、これにはいくつかの欠点があります：

各ローダーは独自のデータベースクエリを実行するため、N+1クエリの問題が発生する可能性があります
ネストされたルートは、親ルートのデータにアクセスできません
各ルートは独自のエラー境界を持つため、エラー処理が複雑になります

Single Fetchフラグは、これらの問題を解決し、より優れたデータ読み込みパターンを提供します。

👉 フラグを有効化

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
  ],
});

フラグを有効にすると、基本的にコードをそのまま使用できますが、以下の変更は時間とともに行う必要があり、次のメジャーバージョンまでに必要になります。

👉 json()/defer()を生のオブジェクトに置き換え

Single Fetchは、JSONオブジェクトとPromiseをそのままサポートするため、loader/action関数から生のデータを返すことができます：

import { json } from "@remix-run/node";

export async function loader() {
  const data = await getData();
  return json(data);
  return data;
}

export async function action() {
  const data = await updateData();
  return json(data);
  return data;
}

👉 親のデータへのアクセス

Single Fetchでは、親のデータに直接アクセスできます：

import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

export async function loader({
  params,
  request,
  context,
  parent, // 👈 新しいプロパティ
}) {
  // 親のデータを取得
  const parentData = await parent();
  return { parentData };
}

👉 エラー処理の改善

Single Fetchでは、エラーは最も近い親のエラー境界にバブルアップします：

export async function loader() {
  // このエラーは最も近い親のエラー境界で捕捉されます
  throw new Error("Something went wrong");
}

将来のフラグ

将来のフラグは、Remixの将来のバージョンで導入される新機能を試すための方法です。これらのフラグは、次のメジャーバージョンでデフォルトで有効になり、その後のメジャーバージョンで削除されます。

フラグを有効にするには、vite.config.tsのfutureオプションに追加します：

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
      },
    }),
  ],
});

Future Flags

フューチャーフラグ

最新のv2.xにアップデート

Viteプラグイン

Single Fetch

将来のフラグ