feat(rspack): add React SSR example (#330)

Author: fi3ework

pnpm-lock.yaml

@@ -1,16 +1,16 @@
-import { type RequestHandler, type ServerAPIs, defineConfig, logger } from '@rsbuild/core';
+import { type RequestHandler, type SetupMiddlewaresContext, defineConfig, logger } from '@rsbuild/core';
 import { pluginReact } from '@rsbuild/plugin-react';
 
 export const serverRender =
-  (serverAPI: ServerAPIs): RequestHandler =>
+  (serverContext: SetupMiddlewaresContext): RequestHandler =>
   async (_req, res, _next) => {
-    const indexModule = await serverAPI.environments.ssr.loadBundle<{
+    const indexModule = await serverContext.environments.ssr.loadBundle<{
       render: () => string;
     }>('index');
 
     const markup = indexModule.render();
 
-    const template = await serverAPI.environments.web.getTransformedHtml('index');
+    const template = await serverContext.environments.web.getTransformedHtml('index');
 
     const html = template.replace('<!--app-content-->', markup);
 
@@ -24,8 +24,8 @@ export default defineConfig({
   plugins: [pluginReact()],
   dev: {
     setupMiddlewares: [
-      ({ unshift }, serverAPI) => {
-        const serverRenderMiddleware = serverRender(serverAPI);
+      ({ unshift }, serverContext) => {
+        const serverRenderMiddleware = serverRender(serverContext);
 
         unshift(async (req, res, next) => {
           if (req.method === 'GET' && req.url === '/') {

rsbuild/ssr/rsbuild.config.ts

@@ -2,6 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 export {}
 
 /* prettier-ignore */

rsbuild/vue3-element-plus/components.d.ts

@@ -2,6 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 export {}
 
 /* prettier-ignore */

rsbuild/vue3-vant/components.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { App } from "./components/app";
+
+ReactDOM.hydrate(<App />, document.getElementById("root"));

rspack/react-ssr-esm/client/client.tsx

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const App: React.FC = () => <p>Rspack + React + SSR + ESM</p>;

rspack/react-ssr-esm/client/components/app.tsx

@@ -0,0 +1,56 @@
+import { spawn } from "cross-spawn";
+import path from "path";
+import rspack from "@rspack/core";
+import rspackConfigClient from "./rspack.config.client.js";
+import rspackConfigServer from "./rspack.config.server.js";
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const compiler = rspack([
+  {
+    ...rspackConfigClient,
+    mode: "development",
+    devtool: "source-map",
+    output: {
+      ...rspackConfigClient.output,
+      filename: "[name].js",
+    },
+  },
+  {
+    ...rspackConfigServer,
+    mode: "development",
+    devtool: "source-map",
+  },
+]);
+
+let node;
+
+compiler.hooks.watchRun.tap("Dev", (compiler) => {
+  console.log(`Compiling ${compiler.name} ...`);
+  if (compiler.name === "server" && node) {
+    node.kill();
+    node = undefined;
+  }
+});
+
+compiler.watch({}, (err, stats) => {
+  if (err) {
+    console.error(err);
+    process.exit(1);
+  }
+  console.log(stats?.toString("minimal"));
+  const compiledSuccessfully = !stats?.hasErrors();
+  if (compiledSuccessfully && !node) {
+    console.log("Starting Node.js ...");
+    node = spawn(
+      "node",
+      ["--inspect", path.join(__dirname, "dist/server.js")],
+      {
+        stdio: "inherit",
+      }
+    );
+  }
+});

rspack/react-ssr-esm/dev.js

@@ -0,0 +1,29 @@
+{
+  "name": "example-react-ssr-esm",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "build:server": "rspack --config rspack.config.server.js",
+    "build:client": "rspack --config rspack.config.client.js",
+    "start": "node ./dist/server.js",
+    "start:dev": "node dev.js"
+  },
+  "devDependencies": {
+    "@types/cross-spawn": "^6.0.6",
+    "@types/express": "^5.0.3",
+    "@types/node": "^22.17.1",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "cross-spawn": "^7.0.6",
+    "typescript": "^5.9.2",
+    "rspack-manifest-plugin": "^5.0.3",
+    "@rspack/core": "1.4.11",
+    "@rspack/cli": "1.4.11"
+  },
+  "dependencies": {
+    "ejs": "^3.1.10",
+    "express": "^5.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  }
+}

rspack/react-ssr-esm/package.json

@@ -0,0 +1,39 @@
+import path from "path";
+import { RspackManifestPlugin } from "rspack-manifest-plugin";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default {
+  name: "client",
+  entry: {
+    client: path.resolve(__dirname, "client/client.tsx"),
+  },
+  mode: "production",
+  output: {
+    clean: true,
+    path: path.resolve(__dirname + "/dist/static"),
+    filename: "[name].[contenthash].js",
+    publicPath: "",
+  },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: "builtin:swc-loader",
+      },
+    ],
+  },
+  target: "web",
+  plugins: [new RspackManifestPlugin()],
+  output: {
+    module: true,
+  },
+  experiments: {
+    outputModule: true,
+  },
+};

rspack/react-ssr-esm/rspack.config.client.js

@@ -0,0 +1,56 @@
+import path from 'path'
+import rspack from '@rspack/core'
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+export default {
+  name: 'server',
+  entry: {
+    server: path.resolve(__dirname, 'server', 'server.ts'),
+  },
+  mode: 'production',
+  experiments: {
+    outputModule: true,
+  },
+  output: {
+    module: true,
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].js',
+  },
+  externalsType: 'node-commonjs',
+  externals: ['react', 'express', 'react-dom/server'],
+  resolve: {
+    extensions: ['.ts', '.tsx'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: "builtin:swc-loader",
+      },
+    ],
+  },
+  target: 'node',
+  node: {
+    __dirname: false,
+    __filename: false,
+  },
+
+  plugins: [
+    new rspack.BannerPlugin({
+      banner: `
+import { fileURLToPath as __rspack_fileURLToPath } from 'url';
+import { dirname as __rspack_dirname } from 'path'
+const __filename = __rspack_fileURLToPath(import.meta.url);
+const __dirname = __rspack_dirname(__filename);
+    `,
+      raw: true,
+    }),
+    new rspack.CopyRspackPlugin({
+      patterns: [{ context: 'server', from: 'views', to: 'views' }],
+    }),
+  ],
+}