React Server Components

React Server Componentsの挙動を理解するべくサンプルを作ってみました。

npx create-next-app@latest my-rsc-app –ts –experimental-app

まずは実行画面ですが、「Load Users」ボタンを押すと、Alice,Bobといったユーザのリストが表示されるといったものです。
/_rsc に対するレスポンスがRSCペイロードと呼ばれるものです。

page.tsx

import UserList from "./UserList";

export default function Page() {
  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">User List</h1>
      <UserList />
    </main>
  );
}

import UserList from "./UserList";

export default function Page() {

return (

</main>

);

}

UserList.tsx

"use client";
import { JSX, lazy, Suspense, useState, useTransition } from "react";
import { useRouter } from "next/navigation";
const Users = lazy(() => import("./users/page"));

//import dynamic from "next/dynamic";
//const Users = dynamic(() => import("./users/page"), { ssr: false });

export default function UserList() {
  const [isPending, startTransition] = useTransition();
  //const [usersComponent, setUsersComponent] = useState<JSX.Element | null>(null);
  const router = useRouter();
  const [loaded, setLoaded] = useState(false);

  const loadUsers = async () => {
    startTransition(async () => {
      //const response = await fetch("/users", { cache: "no-store" });
      //const text = await response.text();
      //setUsersComponent(() => new Function("return " + text)());
      setLoaded(true)
      router.refresh();
    });
  };

  return (
    <div className="mt-4">
      <button
        className="px-4 py-2 bg-green-500 text-white rounded"
        onClick={loadUsers}
        disabled={isPending}
      >
        {isPending ? "Loading..." : "Load Users"}
      </button>
      <div className="mt-4">
        {loaded && (
          <Suspense fallback={<p>Loading users...</p>}>
            <Users />
          </Suspense>
        )}
      </div>
{/*
      <div className="mt-4">{loaded && <Users />}</div>
*/}
    </div>
  );
}

"use client";

import { JSX, lazy, Suspense, useState, useTransition } from "react";

import { useRouter } from "next/navigation";

const Users = lazy(() => import("./users/page"));

//import dynamic from "next/dynamic";

//const Users = dynamic(() => import("./users/page"), { ssr: false });

export default function UserList() {

const [isPending, startTransition] = useTransition();

//const [usersComponent, setUsersComponent] = useState<JSX.Element | null>(null);

const router = useRouter();

const [loaded, setLoaded] = useState(false);

const loadUsers = async () => {

startTransition(async () => {

//const response = await fetch("/users", { cache: "no-store" });

//const text = await response.text();

//setUsersComponent(() => new Function("return " + text)());

setLoaded(true)

router.refresh();

});

};

return (

<button

className="px-4 py-2 bg-green-500 text-white rounded"

onClick={loadUsers}

disabled={isPending}

{isPending ? "Loading..." : "Load Users"}

</button>

{loaded && (

<Suspense fallback={<p>Loading users...</p>}>

</Suspense>

)}

</div>

{/*

<div className="mt-4">{loaded && <Users />}</div>

*/}

</div>

);

}

users/page.tsx

import UserCard from "../UserCard";

async function fetchUsers() {
  return [
    { id: 1, name: "Alice", email: "alice@example.com" },
    { id: 2, name: "Bob", email: "bob@example.com" }
  ];
}

export default async function Users() {
  const users = await fetchUsers();
  return (
    <div>
      {users.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

import UserCard from "../UserCard";

async function fetchUsers() {

return [

{ id: 1, name: "Alice", email: "alice@example.com" },

{ id: 2, name: "Bob", email: "bob@example.com" }

];

}

export default async function Users() {

const users = await fetchUsers();

return (

<div>

{users.map(user => (

))}

</div>

);

}

UserCard.tsx

type User = {
  id: number;
  name: string;
  email: string;
};
type Props = {
  user: User;
};
export default function UserCard({ user }: Props) {
  return (
    <div className="p-4 border rounded-md mt-2 bg-yellow-100">
      <h2 className="text-lg font-semibold">{user.name}</h2>
      <p className="text-gray-600">{user.email}</p>
    </div>
  );
}

type User = {

id: number;

email: string;

};

type Props = {

user: User;

};

export default function UserCard({ user }: Props) {

return (

<p className="text-gray-600">{user.email}</p>

</div>

);

}

ただ、これではフレームワークがいろいろとやってくれているので、ペイロードを受け取ったあとどのように表示されるのか、よくわかりません。なぜ_rscを呼んでいるのか、AliceやBobといったテキストが_rscのレスポンスになかったりと・・

そこで、下記動画で紹介されている方法で、明示的にペイロードを受け取りレンダリングしている様子がわかる部分を確認してみました。

https://github.com/bholmesdev/simple-rsc

app/_client.jsx

import { createRoot } from 'react-dom/client';
import { createFromFetch } from 'react-server-dom-webpack/client';

// HACK: map webpack resolution to native ESM
// @ts-expect-error Property '__webpack_require__' does not exist on type 'Window & typeof globalThis'.
window.__webpack_require__ = async (id) => {
  return import(id);
};

// @ts-expect-error `root` might be null
const root = createRoot(document.getElementById('root'));

/**
 * Fetch your server component stream from `/rsc`
 * and render results into the root element as they come in.
 */
createFromFetch(fetch('/rsc')).then(comp => {
  console.log('comp', comp)
  root.render(comp);
})

import { createRoot } from 'react-dom/client';

import { createFromFetch } from 'react-server-dom-webpack/client';

// HACK: map webpack resolution to native ESM

// @ts-expect-error Property '__webpack_require__' does not exist on type 'Window & typeof globalThis'.

window.__webpack_require__ = async (id) => {

return import(id);

};

// @ts-expect-error `root` might be null

const root = createRoot(document.getElementById('root'));

/**

* Fetch your server component stream from `/rsc`

* and render results into the root element as they come in.

createFromFetch(fetch('/rsc')).then(comp => {

console.log('comp', comp)

root.render(comp);

})

app/page.jsx

import { Suspense } from 'react';
import { getAll } from '../data/db.js';

async function Albums() {
  const albums = await getAll();
  return (
    <ul>
      {albums.map((a) => (
        <li key={a.id} className="flex gap-2 items-center mb-2">
          <img className="w-10 aspect-square" src={a.cover} alt={a.title} />
          <div>
            <h3 className="text-xl">{a.title}</h3>
            <p>{a.songs.length} songs</p>
          </div>
        </li>
      ))}
    </ul>
  );
}

export default async function Page() {
  return (
    <>
      <h1 className="text-3xl mb-3">Spotifn’t</h1>
      <Suspense fallback="Getting albums">
        {/* @ts-expect-error 'Promise<Element>' is not a valid JSX element. */}
        <Albums />
      </Suspense>
    </>
  );
}

import { Suspense } from 'react';

import { getAll } from '../data/db.js';

async function Albums() {

const albums = await getAll();

return (

<ul>

{albums.map((a) => (

<div>

<h3 className="text-xl">{a.title}</h3>

<p>{a.songs.length} songs</p>

</div>

</li>

))}

</ul>

);

}

export default async function Page() {

return (

<h1 className="text-3xl mb-3">Spotifn’t</h1>

{/* @ts-expect-error 'Promise<Element>' is not a valid JSX element. */}

</Suspense>

</>

);

}

server.js

import { serve } from '@hono/node-server';
import { Hono } from 'hono';
import { build as esbuild } from 'esbuild';
import { fileURLToPath } from 'node:url';
import { createElement } from 'react';
import { serveStatic } from '@hono/node-server/serve-static';
import * as ReactServerDom from 'react-server-dom-webpack/server.browser';
import { readFile, writeFile } from 'node:fs/promises';
import { parse } from 'es-module-lexer';
import { relative } from 'node:path';

const app = new Hono();
const clientComponentMap = {};

/**
 * Endpoint to serve your index route.
 * Includes the loader `/build/_client.js` to request your server component
 * and stream results into `<div id="root">`
 */
app.get('/', async (c) => {
	return c.html(`
	<!DOCTYPE html>
	<html>
	<head>
		<title>React Server Components from Scratch</title>
		<script src="https://cdn.tailwindcss.com"></script>
	</head>
	<body>
		<div id="root"></div>
		<script type="module" src="/build/_client.js"></script>
	</body>
	</html>
	`);
});

/**
 * Endpoint to render your server component to a stream.
 * This uses `react-server-dom-webpack` to parse React elements
 * into encoded virtual DOM elements for the client to read.
 */
app.get('/rsc', async (c) => {
	// Note This will raise a type error until you build with `npm run dev`
	const Page = await import('./build/page.js');
	// @ts-expect-error `Type '() => Promise<any>' is not assignable to type 'FunctionComponent<{}>'`
	const Comp = createElement(Page.default);

	const stream = ReactServerDom.renderToReadableStream(Comp, clientComponentMap);
	return new Response(stream);
});

/**
 * Serve your `build/` folder as static assets.
 * Allows you to serve built client components
 * to import from your browser.
 */
app.use('/build/*', serveStatic());

/**
 * Build both server and client components with esbuild
 */
async function build() {
	const clientEntryPoints = new Set();

	/** Build the server component tree */
	await esbuild({
		bundle: true,
		format: 'esm',
		logLevel: 'error',
		entryPoints: [resolveApp('page.jsx')],
		outdir: resolveBuild(),
		// avoid bundling npm packages for server-side components
		packages: 'external',
		plugins: [
			{
				name: 'resolve-client-imports',
				setup(build) {
					// Intercept component imports to check for 'use client'
					build.onResolve({ filter: reactComponentRegex }, async ({ path: relativePath }) => {
						const path = resolveApp(relativePath);
						const contents = await readFile(path, 'utf-8');

						if (contents.startsWith("'use client'")) {
							clientEntryPoints.add(path);
							return {
								// Avoid bundling client components into the server build.
								external: true,
								// Resolve the client import to the built `.js` file
								// created by the client `esbuild` process below.
								path: relativePath.replace(reactComponentRegex, '.js')
							};
						}
					});
				}
			}
		]
	});

	/** Build client components */
	const { outputFiles } = await esbuild({
		bundle: true,
		format: 'esm',
		logLevel: 'error',
		entryPoints: [resolveApp('_client.jsx'), ...clientEntryPoints],
		outdir: resolveBuild(),
		splitting: true,
		write: false
	});

	outputFiles.forEach(async (file) => {
		// Parse file export names
		const [, exports] = parse(file.text);
		let newContents = file.text;

		for (const exp of exports) {
			// Create a unique lookup key for each exported component.
			// Could be any identifier!
			// We'll choose the file path + export name for simplicity.
			const key = file.path + exp.n;

			clientComponentMap[key] = {
				// Have the browser import your component from your server
				// at `/build/[component].js`
				id: `/build/${relative(resolveBuild(), file.path)}`,
				// Use the detected export name
				name: exp.n,
				// Turn off chunks. This is webpack-specific
				chunks: [],
				// Use an async import for the built resource in the browser
				async: true
			};

			// Tag each component export with a special `react.client.reference` type
			// and the map key to look up import information.
			// This tells your stream renderer to avoid rendering the
			// client component server-side. Instead, import the built component
			// client-side at `clientComponentMap[key].id`
			newContents += `
${exp.ln}.$$id = ${JSON.stringify(key)};
${exp.ln}.$$typeof = Symbol.for("react.client.reference");
			`;
		}
		await writeFile(file.path, newContents);
	});
}

serve(app, async (info) => {
	await build();
	console.log(`Listening on http://localhost:${info.port}`);
});

/** UTILS */

const appDir = new URL('./app/', import.meta.url);
const buildDir = new URL('./build/', import.meta.url);

function resolveApp(path = '') {
	return fileURLToPath(new URL(path, appDir));
}

function resolveBuild(path = '') {
	return fileURLToPath(new URL(path, buildDir));
}

const reactComponentRegex = /\.jsx$/;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

import { serve } from '@hono/node-server';

import { Hono } from 'hono';

import { build as esbuild } from 'esbuild';

import { fileURLToPath } from 'node:url';

import { createElement } from 'react';

import { serveStatic } from '@hono/node-server/serve-static';

import * as ReactServerDom from 'react-server-dom-webpack/server.browser';

import { readFile, writeFile } from 'node:fs/promises';

import { parse } from 'es-module-lexer';

import { relative } from 'node:path';

const app = new Hono();

const clientComponentMap = {};

/**

* Endpoint to serve your index route.

* Includes the loader `/build/_client.js` to request your server component

* and stream results into `<div id="root">`

app.get('/', async (c) => {

return c.html(`

<!DOCTYPE html>

<html>

<head>

<title>React Server Components from Scratch</title>

</head>

<body>

</body>

</html>

`);

});

/**

* Endpoint to render your server component to a stream.

* This uses `react-server-dom-webpack` to parse React elements

* into encoded virtual DOM elements for the client to read.

app.get('/rsc', async (c) => {

// Note This will raise a type error until you build with `npm run dev`

const Page = await import('./build/page.js');

// @ts-expect-error `Type '() => Promise<any>' is not assignable to type 'FunctionComponent<{}>'`

const Comp = createElement(Page.default);

const stream = ReactServerDom.renderToReadableStream(Comp, clientComponentMap);

return new Response(stream);

});

/**

* Serve your `build/` folder as static assets.

* Allows you to serve built client components

* to import from your browser.

app.use('/build/*', serveStatic());

/**

* Build both server and client components with esbuild

async function build() {

const clientEntryPoints = new Set();

/** Build the server component tree */

await esbuild({

bundle: true,

format: 'esm',

logLevel: 'error',

entryPoints: [resolveApp('page.jsx')],

outdir: resolveBuild(),

// avoid bundling npm packages for server-side components

packages: 'external',

plugins: [

{

setup(build) {

// Intercept component imports to check for 'use client'

build.onResolve({ filter: reactComponentRegex }, async ({ path: relativePath }) => {

const path = resolveApp(relativePath);

const contents = await readFile(path, 'utf-8');

if (contents.startsWith("'use client'")) {

clientEntryPoints.add(path);

return {

// Avoid bundling client components into the server build.

external: true,

// Resolve the client import to the built `.js` file

// created by the client `esbuild` process below.

path: relativePath.replace(reactComponentRegex, '.js')

};

}

});

}

]

});

/** Build client components */

const { outputFiles } = await esbuild({

bundle: true,

format: 'esm',

logLevel: 'error',

entryPoints: [resolveApp('_client.jsx'), ...clientEntryPoints],

outdir: resolveBuild(),

splitting: true,

write: false

});

outputFiles.forEach(async (file) => {

// Parse file export names

const [, exports] = parse(file.text);

let newContents = file.text;

for (const exp of exports) {

// Create a unique lookup key for each exported component.

// Could be any identifier!

// We'll choose the file path + export name for simplicity.

const key = file.path + exp.n;

clientComponentMap[key] = {

// Have the browser import your component from your server

// at `/build/[component].js`

id: `/build/${relative(resolveBuild(), file.path)}`,

// Use the detected export name

// Turn off chunks. This is webpack-specific

chunks: [],

// Use an async import for the built resource in the browser

async: true

};

// Tag each component export with a special `react.client.reference` type

// and the map key to look up import information.

// This tells your stream renderer to avoid rendering the

// client component server-side. Instead, import the built component

// client-side at `clientComponentMap[key].id`

newContents += `

${exp.ln}.$$id = ${JSON.stringify(key)};

${exp.ln}.$$typeof = Symbol.for("react.client.reference");

}

await writeFile(file.path, newContents);

});

}

serve(app, async (info) => {

await build();

console.log(`Listening on http://localhost:${info.port}`);

});

/** UTILS */

const appDir = new URL('./app/', import.meta.url);

const buildDir = new URL('./build/', import.meta.url);

function resolveApp(path = '') {

return fileURLToPath(new URL(path, appDir));

}

function resolveBuild(path = '') {

return fileURLToPath(new URL(path, buildDir));

}

const reactComponentRegex = /\.jsx$/;

起動

node server.js

renderToReadableStream で、生成されたRSCペイロードをcreateFromFetchでレンダーする部分がよく理解できます。
Honoを使っていることで、ローレベルの挙動がわかりやすくなっています。
esbuildでトランスパイラしたファイルをimportしたりと、日頃Next.jsなどに慣れていると、見えない部分的の挙動がわかります。

これをもっとシンプルな形に作り替えようと思いましたが、ライブラリのバージョン違いなどにより思ったようにビルドできず諦めました。
simple-rsc自体依存性を無視したインストール方法をとっています。

npm i –legacy-peer-deps

最初のプロジェクトも　–experimental-app　フラグをつけたりしていますので、まだあまりクリーンな形で実装できないのかもしれません。
しかしいろいろと勉強になるコードでした。