Remix の歩みと Remix 3 - React Router マージから Preact ベースの再始動、3.0 安定版リリースまで

「Remix v3 はいつ出るの？」という問いには、少しややこしい答え方が必要です。「当初予定されていた v3 は React Router v7 として出た」。そしてその後、「まったく新しい方向で作り直した Remix 3 が、2026 年 10 月に安定版になった」。

このややこしさを 1 本で整理しつつ、2026-04-30 の beta.0 から、RC を経て 2026-10-01 に公開された安定版 remix@3.0.0 までの中身と、並走する React Router v8 系の状況を見渡せるようにまとめます。

Remix とは何だったか（簡単なおさらい）

Remix は、React Router 作者の Ryan Florence と Michael Jackson が設立したフルスタック React フレームワークです。Web 標準（fetch / Request / Response / FormData / Streams）を一級市民として扱い、loader / action という server-first なデータフェッチパターン、ネスト型ルーティング、エラーバウンダリ、楽観的 UI といった「Web のレイテンシと闘うための仕組み」をフレームワークに組み込んだのが特徴でした。

Remix の歩み

時系列で並べると、流れがすっきり見えます。2026 年分のバージョンと日付は npm の公開日時（UTC）に基づいています。

「Remix の v3」という言葉が指すものが、2024 年と 2025 年で完全に別物に変わったのが、混乱の元です。

なぜ Remix は一度 React Router にマージされたのか

「Merging Remix and React Router」（2024 年）の説明をかいつまむと、

• Remix の中身は「React Router の上に薄いレイヤーを乗せたもの」に近づいていた
• そのレイヤーをもっと薄く、薄くしていくうちに「もう React Router 本体に取り込んでしまったほうが綺麗」になった
• Shopify 自身に 500 万行規模の React Router アプリがあり、両方を別々に維持するメリットが消えた
• 結果として、当初 Remix v3 と呼んでいたものは React Router v7 の "framework mode" として出すのが最良の選択になった

React Router v7 は、loader / action / ネスト型ルーティング / SSR / RSC（Server Components）対応といったRemix が培ったほぼすべての機能を取り込み、2024 年 11 月にリリースされました。

Remix v1 / v2 から React Router v7 へは、@remix-run/* パッケージを @react-router/*（または react-router 本体）に置き換えるだけの機械的なリネーム作業が主で、公式の codemod も提供されています。Remix v2 future flags をすべて有効にしていた既存プロジェクトであれば、移行コストはかなり低いです。React Router v7 の 3 つのモードについては React Router v7 の歩き方 で詳しく整理しています。

「Wake up, Remix!」と Remix 3 の再始動

2025 年 4 月、Remix チームは 「Wake up, Remix!」というブログでこう書きました。

React Router v7 became really, really good. ... It means we're free to go build what comes next.

つまり、React Router v7 が「Remix のいいところ全部入り」になったおかげで、Remix 自身はもう React フレームワークである必要すらなくなったのです。

そして「次の Remix」のビジョンを次のように打ち出しました。

• シンプル、明快、高速な Web フレームワーク
• モジュラーツールキット（単独でも使え、組み合わせても使える）
• データベースドライバから内蔵 UI ライブラリ（Reach UI の復活）まで自前
• クリティカルな依存をゼロにする。React にすら依存しない
• ベースは Preact のフォークから始める

「メジャーバージョンアップ」ではなく 「新しい方向（new direction）」と言い切っているのが特徴的です。

2026-04-30 の公式ブログ「Remix 3 Beta Preview」では、これまでの Remix（と React Router）がルーティングとレンダリングだけを担う "center stack" だったのに対し、Remix 3 はルート・リクエストハンドラ・ミドルウェア・セッション・認証・フォーム・アップロード・アセット・データベース管理・UI コンポーネント・テストまでを 1 つの remix の傘の下で扱う「フルスタック」を目指す、と説明されています。続く 2026-05-06 の「A Brand New Remix」では、Remix 3 の思想に合わせてロゴとサイトが刷新されました。

Remix 3 の 6 つの設計原則

Remix の GitHub リポジトリと「Wake up, Remix!」ブログに、Remix 3 開発の指針として次の 6 原則が明示されています。これが Remix 3 の世界観そのものなので、まず読んでおく価値があります。

「Model-First」が原則の 1 番に来ているのが象徴的です。Remix 3 は最初から「LLM が読み書きすることを前提に設計された Web フレームワーク」として作られています。

なぜ React ではなく Preact のフォークなのか

「依存ゼロを目指す」という原則 4 を、もっとも色濃く反映しているのがこの判断です。

• React への依存を切ることで、React のロードマップ（並行レンダリングや RSC の方向性、Compiler の挙動、依存ライブラリの分断）に振り回されなくなる
• Preact は既に成熟している（Shopify / Google などで大規模採用実績あり）
• Preact から フォークすることで、Web Components や AI ファーストな仕組みを独自に拡張できる
• 既存の React コードベースとの互換性を狙うのではなく、「Web により近いコンポーネントモデル」を新規に作る

3.0.0 時点の component パッケージの README では、このコンポーネントランタイムを「JavaScript と DOM プリミティブの上に作られた最小のコンポーネントシステム」と説明しており、状態は普通の JavaScript 変数で持ち、handle.update() で明示的に再レンダリングを予約するモデルになっています（後述の最小手順を参照）。

ここを読んで「分裂じゃないか」と感じるかもしれませんが、Remix 3 は既存の React Router ユーザーを連れて行こうとしていないのがポイント。React 系のアプリを「いま動かしたい」人は React Router をそのまま使えばいいし、Remix 3 は別の選択肢として並走する、というのが現在の整理です。

Remix 3.0 の構造

Remix 3 のリポジトリは pnpm モノレポで、packages/ 配下に小さなパッケージが多数並んでいます。3.0.0 の公開と同時に、各パッケージもほぼ 1.0.0 として GitHub Releases に並びました（ui は 0.12.1、lazy-file は 5.0.8）。代表的なものを抜き出すと次のとおりです。

これらが個別パッケージとして単独でも使えるように作られたうえで、利用者からは remix という単一パッケージ越しに再エクスポートで使う、という構造です（原則 5・原則 6）。

import { createRoot, css, on } from 'remix/component'
import { renderToString } from 'remix/component/server'
import { ... } from 'remix/headers'
import { ... } from 'remix/multipart-parser'
import { ... } from 'remix/node-fetch-server'
import { ... } from 'remix/data-table'

ドキュメントもインストールもnpm i remix で完結するのに、内部では細かいパッケージに分かれていて単独利用も可能、というのが Remix 3 の物理構造です。

beta.0 時点で見えていた新機能・変更点

ここからは、本記事の初版時点（2026-04-30 の 3.0.0-beta.0）で出てきていた変更点です。Remix 3 は「v2 からの差分」というより新規プロジェクトなので、「beta.0 で何が出てきていたか」を列挙しています。一部は 3.0.0 安定版で再び変わっているため、その点は各項目と次章で補足します。

1. 統合 UI ランタイム remix/ui/*（3.0.0 で再び remix/component へ）

beta.0 でもっとも目立つ変更だったのがこれ。alpha 初期の remix/component, remix/component/jsx-runtime, remix/component/server といった名前が削除され、remix/ui 配下に統一されました。

// alpha 初期
import { jsx } from 'remix/component/jsx-runtime'
import { renderToString } from 'remix/component/server'
 
// beta.0 時点
import { jsx } from 'remix/ui/jsx-runtime'
import { renderToString } from 'remix/ui/server'

UI コンポーネントは Reach UI 系の構成で、beta.0 時点の remix/ui 配下には Accordion / Button / Combobox / Menu / Popover / Select などのプリミティブや、remix/ui/theme・remix/ui/animation といったサブパスが揃っていました。

ただし 3.0.0 安定版では、この統合はほぼ逆方向に整理し直されています。コンポーネントランタイム・JSX ランタイム・サーバーレンダリング・テストヘルパーなどは remix/component に戻り、ヘッドレス UI プリミティブとアニメーションは remix 本体から切り離されて @remix-run/ui という別パッケージになりました。詳しくは次章で扱います。

2. ランタイム非依存・Node 24.3.0 以上

Remix 3 はランタイム非依存（runtime-agnostic）を強く打ち出しています。Node.js / Bun / Deno / Cloudflare Workers のいずれでも動くことが前提で、内部実装は Node 固有 API（fs / Buffer / node:stream 等）ではなく Web 標準 API（Web Streams API / Uint8Array / Web Crypto API / Blob / File）を使う方針です。

remix パッケージの engines は beta.0 から 3.0.0 まで一貫して Node.js 24.3.0 以上です。

3. remix/cli と remix/test/cli

remix バイナリが追加され、プログラマブル API は remix/cli から、テスト関連の CLI は remix/test/cli から呼べるようになりました。3.0.0 の README では、remix new / remix doctor / remix db migrate / remix routes / remix test などのサブコマンドが案内されています。

4. MultipartPart.headers の型変更（BREAKING）

remix/multipart-parser の MultipartPart.headers が、Headers インスタンスからプレーンなオブジェクト（lower-case キー）に変わりました。

// Before
part.headers.get('content-type')
 
// After
part.headers['content-type']

これは原則 3「Religiously Runtime」の延長線にある変更です。バンドラの解析や Web Fetch 仕様の細部に縛られず、最小限のプレーンなデータ構造に寄せる方針。

5. 機能別パッケージのオプショナル peer dependency

データベースドライバや Playwright 連携など、機能別パッケージのメタデータが整備され、remix の export 経由でオプショナル peer dependency として扱えるようになりました。「使う機能だけを peer に入れる」典型的なツールキット構成です。

6. node-fetch-server / node-serve / terminal

beta.0 ではサーバー実装系のパッケージが追加されました。remix/node-fetch-server は fetch スタイルのリクエストハンドラを Node の HTTP サーバーで動かすブリッジ、remix/node-serve は本番サーブ用、remix/terminal はターミナル UI 系ユーティリティです。なお 3.0.0 の exports を確認すると、remix/node-fetch-server と remix/terminal は残っていますが、remix/node-serve は見当たりません。

7. パッケージ境界の厳格化

リポジトリ内の AGENTS.md（Remix 3 Development Guide）に明記されていますが、

• パッケージ境界をまたぐ re-export を避ける
• src/lib/* の中でバレル風の薄いラッパーを作らない
• 公開 API は常にトップレベル src/ の barrelでだけ宣言する

といった「コンポジション原則を物理構造で強制する」ルールが採用されています。Remix 3 が公開する API は、必ず「どのパッケージのどのファイルから出ているか」が一意にわかる構造になっています。

8. AI / LLM ファーストの開発ガイドライン

リポジトリには skills/make-pr/SKILL.md、skills/make-change-file/SKILL.md、skills/write-readme/SKILL.md といったAI エージェント向けのスキルが同梱されています。原則 1「Model-First Development」を、フレームワーク本体の開発フローでも実践しているのが分かります。

「LLM が読みやすい・書きやすいコードベース」を本気で設計対象にしている、というのは現代のフレームワークとして相当に先鋭的です。

beta から 3.0.0 安定版まで

beta.0 のあと、Remix 3 は 2026-05〜08 にかけて beta.1〜beta.10 を重ね、RC を経て安定版に到達しました。

RC（2026-08-31）で挙げられた主な進化

公式ブログ「Remix 3 Release Candidate」では、beta 以降に入った主な改善として次のものが挙げられています。RC 以降は機能追加を止め、バグ修正・セキュリティ監査・ドキュメント整備の段階に入ると説明されていました。

• マイグレーション・シード・ステータス確認・リセット・ロールバックなどを CLI に組み込んだデータベースワークフロー
• サーバーモジュールの再読み込みと UI コンポーネントのその場更新を行うフルスタック HMR
• JavaScript / CSS / 画像 / フォント / npm パッケージをバンドルせずに配信するアセットサーバーの改善（プリロード内蔵）
• より安全で高速なルートマッチングと URL 生成、router.mount() による合成可能なルーティング、TypeScript 推論の改善
• タブ・トグル・コンテキストメニューなどを加えた UI ライブラリの拡充
• 同じルーター・ミドルウェア・コントローラーをクライアントレンダリングのアプリでも使える SPA サポート
• リンクとフォームによるナビゲーションの改善（ドキュメント全体の更新と、特定フレームだけの更新の両方）
• データベース・アセット・テスト・remix doctor を設定する remix.json

同じブログでは、10 月 2 日の Remix Jam で Remix 3 をリリースする予定であることも告知されていました。

3.0.0（2026-10-01）の主な破壊的変更

3.0.0-rc.5 と同じ日に、remix@3.0.0 が「First stable release of Remix 3」として公開され、npm の latest タグも 3.0.0 になりました。リリースノートで BREAKING CHANGE とされているのは主に UI まわりです。

• remix/ui の大半は remix/component に改名されました（remix/ui/server -> remix/component/server、remix/ui/test -> remix/component/test など）。JSX ランタイムを使うアプリは jsxImportSource も remix/component に変更が必要です。
• コンポーネント HMR も remix/ui-hmr から remix/component-hmr に移り、アセットローダーは uiHmr() から componentHmr() に改名されました。
• remix パッケージは UI コンポーネント・プリミティブ・アニメーションを再エクスポートしなくなりました。accordion / anchor / combobox / listbox / menu / popover / select / tabs / toggle のヘッドレス UI プリミティブとアニメーションは、別パッケージの @remix-run/ui（v0.x の不安定版で、3.0 のリリース対象外）に移っています。
• breadcrumbs / button / checkbox / input / radio といった見た目付きコンポーネントとスタイル用 mixin は削除されました。

// beta 時点
import { createRoot, css, on } from 'remix/ui'
import { animateEntrance, spring } from 'remix/ui/animation'
 
// 3.0.0
import { createRoot, css, on } from 'remix/component'
import { animateEntrance, spring } from '@remix-run/ui/animation'

2026-10-08 時点では、3.0.0 以降の 3.x リリース（3.0.1 や 3.1.0 など）はまだ公開されていません。GitHub の main ブランチには 3.0.0 公開後も HMR やナビゲーションまわりのコミットが入っていますが、どのバージョンで出るかは未確認です。

React Router 側の現状（v8 系）

Remix 3 が独自路線を進む一方で、「Remix v2 の後継」である React Router も 2026-06-17 に v8.0.0 を出しています。CHANGELOG によると、v8 は Open Governance 体制での年 1 回のメジャーリリースという方針の最初のメジャーで、主な変更は次のとおりです。

• 最低要件を Node 22.22.0 以上・React 19.2.7 以上・Vite 7 以上に引き上げ
• ESM 専用パッケージ化、tsconfig の target / lib を ES2022 に更新
• v7 で future flags として用意されていた挙動（middleware 常時有効、splitRouteModules のデフォルト化など）を標準に
• react-router-dom パッケージの廃止（react-router / react-router/dom へ）
• Cloudflare 用の dev プロキシを廃止し、@cloudflare/vite-plugin へ移行

その後のマイナーリリースは次のとおりです（いずれも CHANGELOG で確認）。

8.4.0 で Remix 3 側の route-pattern パッケージが React Router の不安定機能として取り込まれ始めているのは、両プロジェクトが別路線でありながら部品を共有していることを示していて興味深いところです。また v7 系も 7.18.x としてパッチリリースが続いており、2026-09-15 には 8.4.0 と同日に 7.18.4 が公開されています。

React Router と Remix 3、どう使い分けるか

「で、結局自分はどっちを使えばいい？」という疑問に、2026-10 時点の現実的なガイドを置いておきます。

ざっくり 「React 資産を活かすなら React Router v8、React から離れて Web 標準ベースのフルスタックを試すなら Remix 3」が 2026 年 10 月時点の整理です。Remix 3 は安定版になったとはいえ 3.0.0 が出たばかりで、ヘッドレス UI の @remix-run/ui はまだ v0.x の不安定版である点は意識しておくとよいでしょう。

Remix 3.0 を触ってみる最小手順

安定版は npm i remix で導入できます。新規アプリは CLI で作成するのが手軽です。

node -v   # 24.3.0 以上が必要
npx remix new my-remix-app

JSX を使う場合は、tsconfig.json の jsxImportSource を remix/component にします。

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "remix/component"
  }
}

コンポーネントは、ハンドルを受け取ってレンダー関数を返す形で書きます。状態は普通の変数で持ち、handle.update() で再レンダリングを予約します（component パッケージの README の例より）。

import { on } from 'remix/component'
import type { Handle } from 'remix/component'
 
function Counter(handle: Handle<{ initialCount?: number }>) {
  let count = handle.props.initialCount ?? 0
 
  return () => (
    <button
      type="button"
      mix={on('click', () => {
        count++
        void handle.update()
      })}
    >
      Count: {count}
    </button>
  )
}

初版で紹介していた npm i remix@beta と remix/ui からの Button インポートは、3.0.0 ではそのまま動きません。beta 時点のコードを移行する場合は、公式リリースノートの手順に沿って remix/component と @remix-run/ui に書き換えてください。

まとめ

• Remix は 2020 年公開・2022 年 Shopify 買収を経て、2024 年に React Router v7 へマージされた
• 当初 Remix v3 と呼ばれていたものはReact Router v7として出ており、既存 v1 / v2 ユーザーはここに移行する。React Router は 2026-06 に v8 を出し、2026-10-08 時点の最新は 8.4.0
• 2025 年 4 月、Remix チームは 「Wake up, Remix!」 で新しい Remix 3 を再始動。React に依存せずPreact フォークを土台にしたモジュラーツールキットを目指す
• 6 つの設計原則（Model-First / Web APIs / Religiously Runtime / Avoid Dependencies / Demand Composition / Distribute Cohesively）が世界観そのもの
• 2026-04-30 の beta.0、2026-08-31 の RC を経て、2026-10-01 に remix@3.0.0 安定版が公開。データベース・セッション・認証・アセット・テストまで remix 1 パッケージに束ねたフルスタック構成になった
• 安定版では remix/ui が remix/component に改名され、ヘッドレス UI は別パッケージ @remix-run/ui（v0.x）に分離された
• React 資産があるなら React Router v8、React から離れた Web 標準ベースのフルスタックを選ぶなら Remix 3、というのが現時点の使い分け

「Remix」という言葉が指す対象がここ数年で何度も変わっており、Web 上の情報は世代が混在しがちです。「いつの Remix の話か」をまず確認するクセをつけておくと、迷子になりにくいと思います。

参考リンク

• Wake up, Remix! - Remix Blog
• Merging Remix and React Router - Remix Blog
• Mixing It Up: Remix Joins Shopify to Push the Web Forward
• Upgrading from Remix v2 to React Router v7
• remix-run/remix on GitHub
• remix v3.0.0 Release Notes
• Remix 3 Release Candidate - Remix Blog
• A Brand New Remix - Remix Blog
• Remix 3 Beta Preview - Remix Blog
• remix v3.0.0-beta.0 Release Notes
• remix v3.0.0-alpha.6 Release Notes
• remix-run/remix packages/component
• React Router v8 - Remix Blog
• React Router CHANGELOG
• react-router v8.4.0 Release
• Remix (web framework) - Wikipedia