Setting Up an Express Server for Server-Side Rendering in a React Project

To set up an Express server for server-side rendering (SSR) in a React project, follow these steps:

Step 1: Create a New React Project

Create a new React project using the `create-react-app` command-line tool:

bash
npx create-react-app ssr-react-app
cd ssr-react-app

Step 2: Install Express

Install Express using npm:

bash
npm install express

Step 3: Configure Express Server

Create a new file named `server/index.js` to configure the Express server:

javascript
// server/index.js
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3001;

app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});

Step 4: Create React Component for SSR

Create a new file named `src/AppServer.js` to define the React component that will be rendered on the server:

javascript
// src/AppServer.js
import React from 'react';

const AppServer = () => {
  return (
    <div>
      <h1>Hello from Server-Side Rendered React App!</h1>
    </div>
  );
};

export default AppServer;

Step 5: Configure Webpack for SSR

Create a new file named `webpack.server.js` to configure Webpack for server-side rendering:

javascript
// webpack.server.js
const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  target: 'node',
  mode: 'development',
  externals: [nodeExternals()],
  entry: './server/index.js',
  output: {
    filename: 'server.js',
    path: path.resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

Step 6: Add Build Script to `package.json`

Add a new script to your `package.json` file to build the server-side bundle:

json
"scripts": {
  ...
  "build:server": "webpack --config webpack.server.js",
  ...
}

Step 7: Run the Server

Run the Express server by executing the following command:

bash
npm run build:server

Step 8: Render the React Component on the Server

Modify the `server/index.js` file to render the React component on the server:

javascript
// server/index.js
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3001;
const ReactDOMServer = require('react-dom/server');

app.get('*', (req, res) => {
  const appHtml = ReactDOMServer.renderToString(<AppServer />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>My React SSR App</title>
      </head>
      <body>
        <div id="root">${appHtml}</div>
        <script src="bundle.js"></script>
      </body>
    </html>
  `);
});

app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});

Step 9: Run the Client-Side Application

Run the client-side application by executing the following command:

bash
npm start

This setup allows you to render your React application on the server using Express and then hydrate it on the client-side. This approach can improve SEO and performance by reducing the amount of data that needs to be transferred over the network[1][2][3].

Citations:
[1] https://www.sphinx-solution.com/blog/server-side-rendering/
[2] https://codedamn.com/news/reactjs/server-side-rendering-reactjs
[3] https://www.youtube.com/watch?v=4rXgnC25t34
[4] https://www.youtube.com/watch?v=LRohAW0WYZM
[5] https://thescimus.com/blog/ssr-react-with-node-express/

How do I set up an Express server for SSR in a React project