Server Side Rendering with React

In this article, we will learn how to render a simple React app using an express server.

Server Side Rendering (SSR) can be a useful tool to improve your application's load time and optimise it for better discoverability by search engines.

React provides full support for SSR via the react-dom/server module, and we can easily set up a Node.js based server to render our React app.

In the following sections, we will create a simple counter app with React and render it server-side using an express backend.

Prerequisites##

Part 1: Creating the app#

Step 1: Create a stock React App#

Let us use create-react-app to generate a stock React app. We'll call our app ssr-example.

Step 2: Create a simple counter##

Let us modify the App.js file to implement a simple counter component that displays the current count. It will also render buttons with which the counter can be incremented and decremented.


Step 3: Modify index.js#

In our app's index.js file, we have the following line which tells React where to render our app.

This needs to be slightly modified to work with SSR.

Step 4: Build the app##

To be able to render our app, we must first compile it so that an index.html and the compiled JavaScript is available. You can build the app with the following command:

##

Part 2: Create the server#

Step 1: Install express and babel dependencies#

We will use express.js to set up a simple server for our app. You can install it using the following command in your project folder:

Since the server needs to be able to render JSX, we will also need to add some babel dependencies. We will also install ignore-styles since we do not want to compile CSS.

Step 2: Define the server#

Let us create a server using the express module we have just installed.

To start, create a folder called server in your project folder, and create a server.js file within it like so:

We have just defined an express app that will listen on port 8000 when started.

With the app.use() statement, we have also set up a handler for all requests to routes matching the ^/$ regular expression.

In the next step, we will add code in the handler to render our app.

But before we move on to that, we will need to configure our babel dependencies to work with the server we have just defined.

To do so, create an index.js file in the server folder with the following code that imports the required dependencies, and calls @babel/register:


Step 3: Render the app#

Let us now add the code that actually renders our app.

For this, we will use the fs module to access the file system and fetch the index.html file for our app.

If there is an error reading the file, we will return a 500 status code with an error message. Otherwise, we can proceed with the rendering.

The index.html has a placeholder element, usually a div with the ID root where it renders the React app. We will use the renderToString function from react-dom/server to render our App component as a string, and append it to the placeholder div.

And that is pretty much it! We're now just one step away from being able to get this up and running.

Let us add an ssr script to our package.json file to run the server.

You can now start the server from your terminal with the command yarn ssr.

When you navigate to http://localhost:8000 in your browser, you will see the app rendered as before. The only difference will be that the server responds back with the rendered HTML this time around.


Conclusion#

We have now learnt how to implement Server Side Rendering with a React app using a simple express server.

The code used in this article is available at https://github.com/satansdeer/ssr-example, and a video version of this article can be found at https://www.youtube.com/watch?v=NwyQONeqRXA.