ReactDOMServer

Server-side Rendering (SSR) allows dynamic components to be served to the clients as static HTML. This can improve loading speed and enhance search engine optimization (SEO).

In practice, most apps today reach for a framework such as Next.js (covered later in this tutorial) which handles SSR, code-splitting, and hydration out of the box. Still, understanding the underlying ReactDOMServer API below is valuable, since it's what those frameworks use internally.

To set up a Node.js Express server that supports SSR with React:

Scaffolding the project and installing SSR dependencies via npm
mkdir MyProjectcd MyProjectnpm initnpm install express react react-dom npm install --save-dev webpack webpack-cli webpack-node-externals @babel/core babel-loader @babel/preset-env @babel/preset-react concurrently nodemon

'express' is a very popular Node.js web framework.

'webpack' bundles your .js files into a single file.

'babel' compiles your 'import' statements (preset-env) and JSX statements (preset-react) into native JavaScript code.

'concurrently' allows you to run the webpack watcher and the 'nodemon' server in parallel.

'nodemon' allows you to launch a Node.js server that updates itself automatically as it watches for changes in the source files.

To set up the assets bundler webpack for our use, add a file named 'MyProject/webpack.config.js' with the following contents:

const path = require("path");const nodeExternals = require("webpack-node-externals");const js = {
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: "babel-loader",
    options: {
      presets: ["@babel/preset-env", "@babel/preset-react"],
    },
  }, };const serverConfig = {
  mode: "development",
  target: "node",
  node: {
    __dirname: false,
  },
  externals: [nodeExternals()],
  entry: {
    "server.js": "./server.js"
  },
  module: {
    rules: [js],
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]",
  }, }; const clientConfig = {
  mode: "development",
  target: "web",
  entry: {
    "home.js": "./public/home.js"
  },
  module: {
    rules: [js],
  },
  output: {
    path:
      path.resolve(__dirname, "dist/public"),
    filename: "[name]",
  }, }; module.exports = [serverConfig, clientConfig];

const path = require("path");const nodeExternals = require("webpack-node-externals");const js = {
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: "babel-loader",
    options: {
      presets: ["@babel/preset-env", "@babel/preset-react"],
    },
  }, };const serverConfig = {
  mode: "development",
  target: "node",
  node: {
    __dirname: false,
  },
  externals: [nodeExternals()],
  entry: {
    "server.js": "./server.js"
  },
  module: {
    rules: [js],
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]",
  }, }; const clientConfig = {
  mode: "development",
  target: "web",
  entry: {
    "home.js": "./public/home.js"
  },
  module: {
    rules: [js],
  },
  output: {
    path:
      path.resolve(__dirname, "dist/public"),
    filename: "[name]",
  }, }; module.exports = [serverConfig, clientConfig];

'entry' specifies the files to start with when trying to follow 'import' statements. 'output' specifies the directory to place the bundled-up files.

Lastly, edit the file 'package.json':

Adding a start script to package.json
... "scripts": { "start":"webpack && concurrently \"webpack --watch\" \"nodemon .\\dist\\server.js\"" },......

Running 'npm start' will compile all the server-side .js JSX files onto the directory dist/, and launch the Node.js server. (We will describe server.js in the following section.)

MENU

ReactDOMServer