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
Visual Studio Code (or another code editor of your choice).
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
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
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.
To be able to render our app, we must first compile it so that an
Part 2: Create the server#
Step 1: Install
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.
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
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.
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
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
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.
We have now learnt how to implement Server Side Rendering with a React app using a simple