RSCの時代にReactとフレームワークの境界を探る

RSCの時代にReactとフレームワークの境界を探る 2025-09-06 フロントエンドカンファレンス北海道2025

発表者紹介 uhyo 株式会社カオナビフロントエンドエキスパートぎりぎりReactのクラスコンポーネントを使ったことがある。 2

React Server Components (RSC) React 19で安定化されたReactの機能。従来のコンポーネントよりも前の別段階でレンダリングされる。別段階は、リクエスト時のサーバー側だったり、ビルド時だったりする。
3

RSCを使う方法 RSCはReact用フレームワークと一緒に使用する。 •Next.js RSC対応の先駆者、webpackベースの重量級 •@lazarv/react-server Viteベースの軽量フレームワーク •React Router これもViteベース（現在はプレビュー機能） •Waku
やっぱりViteベースのミニマルなフレームワークなど 4

疑問フレームワークを介さないと使えないのに、 RSCは本当にReactの機能なの？フレームワークとRSCの境界はどこにあるの？ 5

答え① 複数の異なるフレームワークで利用できるのは、 RSCがReact本体の機能だからですよね。でも、 RSCのやりたいことを実現するためにフレームワークの助けが必要だからこうなっています。 6

This Talk RSCのやりたいこととはどのようなことで、フレームワークがそれをどう助けているのかを解説します。 7

でもフレームワーク無しで RSCを動かす 8

フレームワーク無しでRSCを動かす RSCを“動かす”だけなら、フレームワーク無しでできる。しかし、我々が良く知るRSCとは別物になる。 ←このZenn本で詳しく解説しています 9

我々が良く知るRSC 10 import { Client } from “./client.tsx”; export const
SC = () => { return ( <div> <Client /> </div> ); }; server.tsx “use client”; export const Client = () => { return ( <p>client!</p> ); }; client.tsx import サーバーからクライアントをimportしてコンポーネントを使用できる。

フレームワーク無しのRSC 11 const Client = { /* 省略 */ };
export const SC = () => { return ( <div> <Client /> </div> ); }; server.tsx export const Client = () => { return ( <p>client!</p> ); }; client.tsx 独立サーバーとクライアントは独立した、別々のプログラムになる。

フレームワーク無しのRSC 12 const Client = { /* 省略 */ };
export const SC = () => { return ( <div> <Client /> </div> ); }; server.tsx server.tsxはサーバー側用のReactランタイムで実行。Clientはサーバー側でレンダリングしない。 Clientは「Clientというコンポーネント」のままクライアント側に送られる。クライアント側がClientのレンダリングを担当。

フレームワーク無しのRSC 13 export const Client = () => { return
( <p>client!</p> ); }; client.tsx client.tsxはクライアント用のReactランタイムで実行。 SC部分がただのHTMLとなった状態でクライアント側のランタイムに渡される。こちらはClientの定義を知っており、 Clientをレンダリングできる。

フレームワーク無しのRSCの問題 14 const Client = { /* 省略 */ };
export const SC = () => { return ( <div> <Client /> </div> ); }; server.tsx export const Client = () => { return ( <p>client!</p> ); }; client.tsx 別々のプログラムで2つの定義を同期させる必要がある。非常にDX悪い。

フレームワークがやっていること 15

RSCでフレームワークがやっていること importでサーバーとクライアントが繋がった Reactプログラムを、「サーバー側用」と「クライアント用」の 2つの別々のプログラムへとビルドする。ビルドサーバー用クライアント用

RSCでフレームワークがやっていることこのようなビルド工程はバンドラがやっていることの応用である。そのため、フレームワークでも、RSC対応の根本部分はバンドラのプラグインとして実装される。 17

Reactフレームワークの構造 18 サーバー用 Reactランタイムクライアント用 Reactランタイム Reactの機能バンドラの機能 RSC規約に従ったサーバー・クライアント分割
及びビルドフレームワークの個性ルーティングキャッシュ最適化などバンドラプラグイン

RSC規約とは “use client” でクライアントの世界への入り口を示すのがRSCの規約。 Reactフレームワークは同じRSC規約をサポートしている。サーバーとクライアントを「1つのプログラム」に統合するために必要。 19

RSC規約とバンドラの関係 “use client” のようなディレクティブは、 JavaScriptの言語仕様上は意味のない記述。（”use strict”だけは例外）よって、RSCをサポートするためにはバンドラのようなビルドツールが必須。 20

バンドラプラグインの実装 RSC規約に基づいた変換例を見てみよう。今回は @vitejs/plugin-rsc を対象にする。 21 ビルドサーバー用クライ
アント用

サーバー用のビルド方法サーバー用モジュールからクライアント用ファイルをimportする際に、クライアント用モジュールをスタブ的なものに置き換える。 22 置き換え本当のクライアント用コードと切り離される

置き換えの実例置き換え前（実際のクライアント用モジュール） 'use client'; export function Greet({ name }: {
name: string }) { return <>Hello {name}</>; } 23 Waku v0.25.0 のソースコードから一部改変して引用（次のスライドも同じ） https://github.com/wakujs/waku/blob/473d481f0d926e05c9b0b8af5d2b777ff47eb70b/packages /waku/tests/vite-plugin-rsc-transform-internals.test.ts

置き換えの実例置き換え後（サーバー側から見える同モジュール） import { registerClientReference } from 'react-server-dom-webpack/server.edge’; export const
Greet = registerClientReference(()=>{ throw new Error('It is not possible to invoke a client function from the server: /src/App.tsx#Greet'); }, '/src/App.tsx', 'Greet'); 24

置き換えで何をやっているか実際のクライアント側モジュールでexportされていたものに対応するクライアントへの参照を、React本体の機能として用意されているregisterClientReferenceを使って用意している。（クライアントへの参照の実態はファイル名とexport名） 25 本物ではなく参照

置き換えによるRSCの動作 Reactのサーバー側ランタイムはクライアントへの参照を認識し、残したままでレンダリングを行う。クライアント側では、残された参照を解決することができ、レンダリングの続きを行うことができる。 26

バンドラプラグインの実装 @vitejs/plugin-rscのソースコードを見る。 Wakuからも使用されている、Vite公式のRSC用プラグイン。引用元: https://github.com/vitejs/vite-plugin- react/blob/b81bf6ac8a273855c5e9f39d71a32d76fd31b61c/packages/plugin-rsc/src/plugin.ts 27

バンドラプラグインの実装① { name: 'rsc:use-client', async transform(code, id) { /* 中略
*/ const ast = await parseAstAsync(code) if (!hasDirective(ast.body, 'use client')) { delete manager.clientReferenceMetaMap[id] return } /* 以下略 */ 28 ‘use client’ を持つファイルが変換対象

バンドラプラグインの実装② const result = transformDirectiveProxyExport_(ast, { /* 省略 */ runtime:
(name, meta) => { let proxyValue = /* 省略 */ return ( `$$ReactServer.registerClientReference(` + ` ${proxyValue},` + ` ${JSON.stringify(referenceKey)},` + ` ${JSON.stringify(name)})` ) }, 29 各exportを registerClientRefere nce呼び出しに変換

実装を見て分かったことプラグインは、“use client”を頼りにクライアントモジュールをサーバー向けに変換し、サーバー用のビルドを行う。バンドラはサーバーとクライアントの境目だけ変換すればいいため、バンドラに寄り添った規約になっている。（実際は開発サーバーとか色々考慮して変換している） 30

気になる人は探せば“use server”に関連した変換などもある。実装の側からRSCについて理解したい人は、プラグインの実装を読んでみよう。 31

結局、Reactとフレームワークの境目はどこ？ 32

疑問（再掲）フレームワークを介さないと使えないのに、 RSCは本当にReactの機能なの？フレームワークとRSCの境界はどこにあるの？ 33

Reactフレームワークの構造（再掲） 34 サーバー用 Reactランタイムクライアント用 Reactランタイム Reactの機能バンドラの機能 RSC規約に従ったサーバー・クライアント分割
及びビルドフレームワークの個性ルーティングキャッシュ最適化などバンドラプラグイン

答え②: 境目はこんな感じ 35 サーバー用 Reactランタイムクライアント用 Reactランタイム Reactの機能バンドラの機能サーバー・クライアント分割とビルド
RSC規約フレームワークの個性ルーティングキャッシュ最適化などバンドラプラグイン

Reactとフレームワークの境目 Reactは、ランタイムのAPIを提供する。フレームワークは、ReactのAPIを使ってサーバーとクライアントを実装する。加えて、ReactはRSC規約を定義する。その規約を実装するのはフレームワーク。

ポイント RSC規約は、定義する主体と実装する主体が異なる。 React側で規約を定義している理由は、おそらくフレームワークを問わず共通の開発体験を保証するためだろう。（同じWeb標準を複数ブラウザが実装しているのに近いかも）

まとめ RSCは、”use client”のような規約をReactが規定しフレームワークが実装している。実際に、Next.js、@vitejs/plugin-rsc、 @lazarv/react-serverなどがRSC規約を実装し、 RSCをサポートしている。 RSC規約は通常、バンドラプラグインとして実装される。 38

RSCの時代にReactとフレームワークの境界を探る

RSCの時代にReactとフレームワークの境界を探る

uhyo

More Decks by uhyo

Other Decks in Technology

Featured

Transcript