はじめに

まだunstableではありますが、React Router v7.9.2で、Framework ModeにReact Server Components（RSC）が追加されました。
　

セットアップの劇的な簡素化

• RSC対応Viteプラグイン（unstable_reactRouterRSC + @vitejs/plugin-rsc）を有効化するだけ
• 既存のプロジェクトも、プラグインの差し替えだけで移行可能

新機能

• Server Component Route: ルートのデフォルトエクスポートがデフォルトでServer Componentとして動作し、RSC優先のルーティングが可能
• "use client"/"use server"境界: クライアントコンポーネントとサーバ関数の明確な分離
• loader/actionからRSCを返却: 既存のReact RouterのAPIと自然に統合

ビルド出力の一貫性

• ビルド出力は非RSC時と同じ構成（build/server, build/client）を維持。server/index.jsはRequest→Responseのハンドラをエクスポートし、単一サーバとしてデプロイできます。

これまでもData ModeでRSCは使えたのですが、今回の対応により、「技術的には可能」といった状態から「実用的な選択肢」へ一歩近づきました。

秘密鍵の保護、CORS回避、SEO/初期表示改善、サーバキャッシュ最適化など、Next.jsでの開発体験をReact Routerでも簡単に実現できるようになります。

React Routerの3つのモード

まずは前提から。React Routerには3つの主要なモードがあります。

■モード選択 | React Router
https://reactrouter.com/start/modes#framework

Declarative Mode

• 基本的なルーティング機能を提供する従来のモードです。<BrowserRouter>を使用し、URLとコンポーネントのマッチング、ナビゲーション、API（<Link>、useNavigate、useLocationなど）によるアクティブ状態の提供を実現します。

Data Mode

• ルート設定をReactのレンダリング外に移し、データローディング、アクション、ペンディング状態などを追加したモード。
• loader、action、useFetcherなどの低レベルAPIを提供しますが、ビルド/HMR/SSRにおける配線は開発者が自前で実装する必要があります。

Framework Mode

• Data Modeを公式Viteプラグインでラップし、完全なReact Router体験を提供するモード。
• 型生成、任意のファイルシステムルーティング、SPA/SSR/SSG戦略などを含む「メタフレームワーク」寄りの開発体験を実現します。

Framework ModeのRSC対応のメリット

背景

上に書いた通りこれまでも、Data ModeでRSC対応させる、ということは技術的には可能でしたが自前での実装領域がありました。

これは、RSCとSSRの複雑な多重構成を自分で管理しなくてはならず、色々と難易度が高かった、まあ面倒だったわけです。

メリットまとめ

• RSC対応Viteプラグイン（unstable_reactRouterRSC + @vitejs/plugin-rsc）を有効化するだけでRSC環境を構築できる
• 単一ランタイムでのシンプルなデプロイ
• 型生成、ファイルシステムルーティングなどの便利機能も併用可
• Next.jsに近い開発体験を簡単に実現できる（後述）

まとめるとこんな感じです。

実務的なメリット

1. 秘密鍵の保護

• サーバコンポーネント内でクレデンシャルな情報を安全に扱えます。クライアントサイドに流出する心配がありません。

// サーバコンポーネントで安全にAPIキーを使用
async function DataComponent() {
  const data = await fetch('https://api.example.com/data', {
    headers: {
      'Authorization': `Bearer ${process.env.SECRET_API_KEY}` // クライアントに露出しない
    }
  });
  return <div>{/* データ表示 */}</div>;
}

2. CORS回避

• 外部APIがCORSを開けていなくても利用できます。Next.js使ってる方だとわかると思いますが、割と楽になる嬉しい部分ではないでしょうか。

  ※CORSはブラウザ固有の制約です。サーバ側fetch（RSC/SSR/loader/action）では適用されません。

3. SEOと初期表示速度の向上

• サーバでのデータ取得→HTMLストリーミング返却により、TTFBとCLSを抑制しつつSEOに有利な構成を実現できます。
  ※TTFB・・・Time to First Byte。サーバの初期応答時間の指標。参考：https://web.dev/articles/ttfb?hl=ja

  ※CLS・・・Cumulative layout shift。一度読み込んだコンテンツがどれだけ移動するかを示す指標。

4. キャッシュ最適化

• サーバ/エッジ側でのキャッシュ、再検証、ISR的な更新戦略を柔軟に組めます。

5. バンドル削減とセキュリティ向上

• 重いSDKやDBドライバをクライアント側に送る必要がなく、バンドルサイズの縮小とセキュリティ向上が両立できます。

6. サーバアクション

"use server"でmutationやformの処理を安全に実装。サーバ側で実行されるため、クライアントサイドでの不正操作を防ぎ、センシティブなロジックを保護できます。

使い分け

Vite + react-router-dom（SPA）との使い分け

SPAで十分なケース

• 公開API（認証キー不要）かつCORS許可済み
• SEO要件が低い
• 初期ローディング時間が許容範囲内

Framework Mode（RSC/SSR）が効果的なケース

• 秘密鍵が必要な外部API連携
• CORS制約があるAPI利用
• SEOや初期表示速度を重視
• キャッシュ/再検証の最適化が必要
• サーバアクションで安全に更新処理を実装したい

使い方

npm install

npm install @vitejs/plugin-rsc

vite.config.tsの設定変更

// vite.config.ts
import { defineConfig } from "vite";
import { unstable_reactRouterRSC } from "@react-router/dev/vite";
import rsc from "@vitejs/plugin-rsc";

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

これによって、以下の機能が使えるようになります。

• loader/actionからRSCコンテンツを返す機能。
• 通常の default コンポーネントのエクスポートの代わりに ServerComponent をエクスポートすることで、RSC-first "Server Component Routes" を実現
• "use client"ディレクティブを持つクライアントコンポーネント。
• "use server"ディレクティブを使ったサーバ関数。

※SPA モード、プリレンダリング、カスタムビルドエントリーは2025/9/28時点でまだサポートされていません。安定板リリースまでにサポート予定とのこと。

各機能の詳細はこちら。

https://remix.run/blog/rsc-preview

おわりに

Next.jsは個人的には好きなのでまた一つ、Next.jsを使う理由が減るんだなあ・・・と思いながらも笑、純粋に選択肢が増えるのは嬉しいですね。

今後の安定板のリリースを楽しみに待ちたいと思います。

それでは、また。

HTNCode