Implementing Server-Side Rendering in Your React Application

Introduction

Server-side rendering (SSR) is an essential technique for optimizing web applications, improving performance, and enhancing SEO. It involves rendering the initial view of your React app on the server before sending it to the client, which reduces the time it takes for the user to see the content. In this tutorial, we will guide you through setting up server-side rendering with React and Node.js using Express.

Prerequisites

To follow along with this tutorial, make sure you have the following installed:

1. Node.js (14.x or higher)
2. npm (6.x or higher)
3. A basic understanding of React, Node.js, and Express

Step 1: Set up a new React application

First, we will create a new React application using the create-react-app CLI:

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

Step 2: Install dependencies

We will need the following packages for server-side rendering:

1. express: A minimal web framework for Node.js
2. react-dom: To render React components on the server

Install the dependencies by running:

npm install --save express react-dom

Step 3: Create the server

Create a new file called server.js in the root directory of your React app:

touch server.js

Now, add the following code to the server.js file:

const express = require("express");
const fs = require("fs");
const path = require("path");
const { renderToString } = require("react-dom/server");
const React = require("react");

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, "build")));

app.get("/*", (req, res) => {
  const indexHtml = fs.readFileSync(path.join(__dirname, "build", "index.html"), "utf-8");
  const App = require("./src/App").default;

  const appHtml = renderToString(React.createElement(App));
  const finalHtml = indexHtml.replace('<div id="root"></div>', `<div id="root">${appHtml}</div>`);

  res.send(finalHtml);
});

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

This code sets up an Express server that serves the static files from the build directory and renders the React application server-side.

Step 4: Update the React app

Update the src/App.js file to export the App component as a default export:

// src/App.js

// ...

export default App;

Step 5: Modify the build script

Update the scripts section in your package.json file to include a build:server command:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "build:server": "react-scripts build && node server.js",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

Step 6: Run the app with server-side rendering

To build and run your server-side rendered React app, execute the following command:

npm run build:server

Now, navigate to http://localhost:3000 in your browser, and you should see your React app, rendered on the server-side.

Conclusion

In this tutorial, we have shown you how to set up server-side rendering for your React application using Node.js and Express. SSR can significantly improve the performance of your web applications and