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.


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.