`
19 | */
20 | app.get('/', async (c) => {
21 | return c.html(`
22 |
23 |
24 |
25 |
React Server Components from Scratch
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | `);
34 | });
35 |
36 | /**
37 | * Endpoint to render your server component to a stream.
38 | * This uses `react-server-dom-webpack` to parse React elements
39 | * into encoded virtual DOM elements for the client to read.
40 | */
41 | app.get('/rsc', async (c) => {
42 | // Note This will raise a type error until you build with `npm run dev`
43 | const Page = await import('./build/page.js');
44 | const Comp = createElement(Page.default);
45 |
46 | const stream = renderToPipeableStream(Comp, '');
47 | // @ts-expect-error type of env is 'unknown'
48 | stream.pipe(c.env.outgoing);
49 |
50 | return RESPONSE_ALREADY_SENT;
51 | });
52 |
53 | /**
54 | * Serve your `build/` folder as static assets.
55 | * Allows you to serve built client components
56 | * to import from your browser.
57 | */
58 | app.use('/build/*', serveStatic());
59 |
60 | /**
61 | * Build both server and client components with esbuild
62 | */
63 | async function build() {
64 | const clientEntryPoints = new Set();
65 |
66 | /** Build the server component tree */
67 | await esbuild({
68 | bundle: true,
69 | format: 'esm',
70 | logLevel: 'error',
71 | entryPoints: [resolveApp('page.jsx')],
72 | outdir: resolveBuild(),
73 | // avoid bundling npm packages for server-side components
74 | packages: 'external',
75 | plugins: [
76 | {
77 | name: 'resolve-client-imports',
78 | setup(build) {
79 | // Intercept component imports to check for 'use client'
80 | build.onResolve(
81 | { filter: reactComponentRegex },
82 | async ({ path: relativePath, resolveDir }) => {
83 | const path = resolveApp(resolve(resolveDir, relativePath));
84 |
85 | const contents = await readFile(path, 'utf-8');
86 |
87 | if (contents.startsWith("'use client'")) {
88 | clientEntryPoints.add(path);
89 | return {
90 | // Avoid bundling client components into the server build.
91 | external: true,
92 | // Resolve the client import to the built `.js` file
93 | // created by the client `esbuild` process below.
94 | path: relativePath.replace(reactComponentRegex, '.js')
95 | };
96 | }
97 | }
98 | );
99 | }
100 | }
101 | ]
102 | });
103 |
104 | /** Build client components */
105 | const { outputFiles } = await esbuild({
106 | bundle: true,
107 | format: 'esm',
108 | logLevel: 'error',
109 | entryPoints: [resolveApp('_client.jsx'), ...clientEntryPoints],
110 | outdir: resolveBuild(),
111 | splitting: true,
112 | write: false
113 | });
114 |
115 | outputFiles.forEach(async (file) => {
116 | // Parse file export names
117 | const [, exports] = parse(file.text);
118 | let newContents = file.text;
119 |
120 | for (const exp of exports) {
121 | // Create the id for each exported component
122 | // React needs this in the format
#
123 |
124 | const relativeBuildPath = `/build/${relative(resolveBuild(), file.path)}`;
125 | const key = `${relativeBuildPath}#${exp.n}`;
126 |
127 | // Tag each component export with a special `react.client.reference` type
128 | // and the map key to look up import information.
129 | // This tells your stream renderer to avoid rendering the
130 | // client component server-side. Instead, import the built component
131 | // client-side at `clientComponentMap[key].id`
132 | newContents += `
133 | ${exp.ln}.$$id = ${JSON.stringify(key)};
134 | ${exp.ln}.$$typeof = Symbol.for("react.client.reference");
135 | `;
136 | }
137 | await writeFile(file.path, newContents);
138 | });
139 | }
140 |
141 | serve(app, async (info) => {
142 | await build();
143 | console.log(`Listening on http://localhost:${info.port}`);
144 | });
145 |
146 | /** UTILS */
147 |
148 | const appDir = new URL('./app/', import.meta.url);
149 | const buildDir = new URL('./build/', import.meta.url);
150 |
151 | function resolveApp(path = '') {
152 | return fileURLToPath(new URL(path, appDir));
153 | }
154 |
155 | function resolveBuild(path = '') {
156 | return fileURLToPath(new URL(path, buildDir));
157 | }
158 |
159 | const reactComponentRegex = /\.jsx$/;
160 |
--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bholmesdev/simple-rsc/ecf68b59937ed215a79be414d602df8b1b5538c2/tailwind.config.cjs
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "checkJs": true,
4 | "module": "ESNext",
5 | "moduleResolution": "Node",
6 | "target": "ESNext",
7 | "jsx": "react-jsx",
8 | "noEmit": true,
9 | "strict": true,
10 | "noImplicitAny": false,
11 | "allowSyntheticDefaultImports": true,
12 | "resolveJsonModule": true
13 | }
14 | }
15 |
--------------------------------------------------------------------------------