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

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 

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

 to generate a stock React app. We'll call our app 

 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.

import React from "react";
import "./App.css";

function App() {
  const [count, setCount] = React.useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <>
      <p>{count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </>
  );
}

export default App;

 file, we have the following line which tells React where to render our app.

ReactDOM.render(<App />, document.getElementById('root'));

This needs to be slightly modified to work with SSR.

ReactDOM.hydrate(<App />, document.getElementById('root'));

To be able to render our app, we must first compile it so that an 

 and the compiled JavaScript is available. You can build the app with the following command:

 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 

yarn add @babel/preset-env @babel/preset-react @babel/register ignore-styles

import express from 'express'

const PORT = 8000;

const app = express()

app.use('^/$', (req, res, next) => {
  
})

app.listen(PORT, () => {
  console.log(`App launched on ${PORT}`);
})


 app that will listen on port 8000 when started.

 statement, we have also set up a handler for all requests to routes matching the 

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 

 dependencies to work with the server we have just defined.

 folder with the following code that imports the required dependencies, and calls 

require('ignore-styles')

require('@babel/register')({
    ignore: [/(node_module)/],
    presets: ['@babel/preset-env', '@babel/preset-react']
})

require('./server')

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

 module to access the file system and fetch the 

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.

 where it renders the React app. We will use the 

 component as a string, and append it to the placeholder 

import express from 'express'
import fs from 'fs'
import path from 'path'

import React from 'react'
import ReactDOMServer from 'react-dom/server'

import App from '../src/App'

const app = express()

app.use('^/$', (req, res, next) => {
	fs.readFile(path.resolve('./build/index.html'), 'utf-8', (err, data) => {
      if (err) {
        console.log(err)
        return res.status(500).send("Some error happened")
      }
      
      return res.send(data.replace('<div id="root"></div>', `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`))
    })  
})

app.listen(PORT, () => {
  console.log(`App launched on ${PORT}`);
})


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

You can now start the server from your terminal with the command 

 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 

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

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Server Side Rendering with React</h1><div data-node-type="summary" class="summary-block">In this article, we will learn how to render a simple React app using an <code>express</code> server.</div><p>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.</p><p>React provides full support for SSR via the <code>react-dom/server</code> module, and we can easily set up a <code>Node.js</code> based server to render our React app.</p><p>In the following sections, we will create a simple counter app with React and render it server-side using an <code>express</code> backend.</p><h3 class="heading-anchor-text" id="prerequisites"><span>Prerequisites<a href="#prerequisites" rel="noopener noreferrer nofollow">#</a></span><a class="d-inline" href="#prerequisites">#</a></h3><ul><li><p><a href="https://nodejs.org/en/download/" rel="noopener noreferrer nofollow">Node.js</a> and <code><a href="https://yarnpkg.com/" rel="noopener noreferrer nofollow">yarn</a></code>.</p></li><li><p><a href="https://code.visualstudio.com/" rel="noopener noreferrer nofollow">Visual Studio Code</a> (or another code editor of your choice).</p></li><li><p>Fair working knowledge of JavaScript and <a href="https://reactjs.org/" rel="noopener noreferrer nofollow">React</a>.</p></li></ul><h2 class="heading-anchor-text" id="part-1-creating-the-app"><span>Part 1: Creating the app</span><a class="d-inline" href="#part-1-creating-the-app">#</a></h2><h3 class="heading-anchor-text" id="step-1-create-a-stock-react-app"><span>Step 1: Create a stock React App</span><a class="d-inline" href="#step-1-create-a-stock-react-app">#</a></h3><p>Let us use <code>create-react-app</code> to generate a stock React app. We'll call our app <code>ssr-example</code>.</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-undefined" id="cm-undefined">npx create-react-app ssr-example</textarea><h3 class="heading-anchor-text" id="step-2-create-a-simple-counter"><span>Step 2: Create a simple counter<a href="#step-3-modify-appjs" rel="noopener noreferrer nofollow">#</a></span><a class="d-inline" href="#step-2-create-a-simple-counter">#</a></h3><p>Let us modify the <code>App.js</code> 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.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210127175600872_Screenshot%202021-01-27%20at%2017.55.43.png" attachmentid="9c0e6732-2d2a-4779-a8f5-9aac3586d237" contenteditable="false" data-width="1086" data-height="728"><div></div></figure><p></p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-ZRdbs" id="cm-ZRdbs">import React from "react";
import "./App.css";

function App() {
  const [count, setCount] = React.useState(0);

  const increment = () =&gt; {
    setCount(count + 1);
  };

  const decrement = () =&gt; {
    setCount(count - 1);
  };

  return (
    &lt;&gt;
      &lt;p&gt;{count}&lt;/p&gt;
      &lt;button onClick={increment}&gt;Increment&lt;/button&gt;
      &lt;button onClick={decrement}&gt;Decrement&lt;/button&gt;
    &lt;/&gt;
  );
}

export default App;</textarea><h3 class="heading-anchor-text" id="step-3-modify-indexjs"><span>Step 3: Modify <code>index.js</code></span><a class="d-inline" href="#step-3-modify-indexjs">#</a></h3><p>In our app's <code>index.js</code> file, we have the following line which tells React where to render our app.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-6p6dM" id="cm-6p6dM">ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));</textarea><p>This needs to be slightly modified to work with SSR.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-KXcAf" id="cm-KXcAf">ReactDOM.hydrate(&lt;App /&gt;, document.getElementById('root'));</textarea><h3 class="heading-anchor-text" id="step-4-build-the-app"><span>Step 4: Build the app<a href="#step-4-build-the-app" rel="noopener noreferrer nofollow">#</a></span><a class="d-inline" href="#step-4-build-the-app">#</a></h3><p>To be able to render our app, we must first compile it so that an <code>index.html</code> and the compiled JavaScript is available. You can build the app with the following command:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-hLM9B" id="cm-hLM9B">yarn build</textarea><h3 class="heading-anchor-text" id=""><span><a href="#" rel="noopener noreferrer nofollow">#</a></span><a class="d-inline" href="#">#</a></h3><h2 class="heading-anchor-text" id="part-2-create-the-server"><span>Part 2: Create the server</span><a class="d-inline" href="#part-2-create-the-server">#</a></h2><h3 class="heading-anchor-text" id="step-1-install-express-and-babel-dependencies"><span>Step 1: Install <code>express</code> and <code>babel</code> dependencies</span><a class="d-inline" href="#step-1-install-express-and-babel-dependencies">#</a></h3><p>We will use <code>express.js</code> to set up a simple server for our app. You can install it using the following command in your project folder:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-Prngr" id="cm-Prngr">yarn add express</textarea><p>Since the server needs to be able to render JSX, we will also need to add some <code>babel</code> dependencies. We will also install <code>ignore-styles</code> since we do not want to compile CSS.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-ukxAi" id="cm-ukxAi">yarn add @babel/preset-env @babel/preset-react @babel/register ignore-styles</textarea><h3 class="heading-anchor-text" id="step-2-define-the-server"><span>Step 2: Define the server</span><a class="d-inline" href="#step-2-define-the-server">#</a></h3><p>Let us create a server using the <code>express</code> module we have just installed.</p><p>To start, create a folder called <code>server</code> in your project folder, and create a <code>server.js</code> file within it like so:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-ioD3v" id="cm-ioD3v">import express from 'express'

const PORT = 8000;

const app = express()

app.use('^/$', (req, res, next) =&gt; {
  
})

app.listen(PORT, () =&gt; {
  console.log(`App launched on ${PORT}`);
})
</textarea><p>We have just defined an <code>express</code> app that will listen on port 8000 when started.</p><p>With the <code>app.use()</code> statement, we have also set up a handler for all requests to routes matching the <code>^/$</code> regular expression.</p><p>In the next step, we will add code in the handler to render our app.</p><p>But before we move on to that, we will need to configure our <code>babel</code> dependencies to work with the server we have just defined.</p><p>To do so, create an <code>index.js</code> file in the <code>server</code> folder with the following code that imports the required dependencies, and calls <code>@babel/register</code>:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-SpUx0" id="cm-SpUx0">require('ignore-styles')

require('@babel/register')({
    ignore: [/(node_module)/],
    presets: ['@babel/preset-env', '@babel/preset-react']
})

require('./server')</textarea><p></p><h3 class="heading-anchor-text" id="step-3-render-the-app"><span>Step 3: Render the app</span><a class="d-inline" href="#step-3-render-the-app">#</a></h3><p>Let us now add the code that actually renders our app.</p><p>For this, we will use the <code>fs</code> module to access the file system and fetch the <code>index.html</code> file for our app.</p><p>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.</p><p>The <code>index.html</code> has a placeholder element, usually a <code>div</code> with the ID <code>root</code> where it renders the React app. We will use the <code>renderToString</code> function from <code>react-dom/server</code> to render our <code>App</code> component as a string, and append it to the placeholder <code>div</code>.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-Vg16I" id="cm-Vg16I">import express from 'express'
import fs from 'fs'
import path from 'path'

import React from 'react'
import ReactDOMServer from 'react-dom/server'

import App from '../src/App'

const app = express()

app.use('^/$', (req, res, next) =&gt; {
	fs.readFile(path.resolve('./build/index.html'), 'utf-8', (err, data) =&gt; {
      if (err) {
        console.log(err)
        return res.status(500).send("Some error happened")
      }
      
      return res.send(data.replace('&lt;div id="root"&gt;&lt;/div&gt;', `&lt;div id="root"&gt;${ReactDOMServer.renderToString(&lt;App /&gt;)}&lt;/div&gt;`))
    })  
})

app.listen(PORT, () =&gt; {
  console.log(`App launched on ${PORT}`);
})
</textarea><p>And that is pretty much it! We're now just one step away from being able to get this up and running.</p><p>Let us add an <code>ssr</code> script to our <code>package.json</code> file to run the server.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-ohdWb" id="cm-ohdWb">"ssr": "node server/index.js"</textarea><p>You can now start the server from your terminal with the command <code>yarn ssr</code>.</p><p>When you navigate to <code>http://localhost:8000</code> 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.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210127175735768_Screenshot%202021-01-27%20at%2017.57.19.png" attachmentid="0f1aa6a7-0a88-4854-8655-233f3310b94b" contenteditable="false" data-width="1872" data-height="1622"><div></div></figure><p></p><h2 class="heading-anchor-text" id="conclusion"><span>Conclusion</span><a class="d-inline" href="#conclusion">#</a></h2><p>We have now learnt how to implement Server Side Rendering with a React app using a simple <code>express</code> server.</p><p>The code used in this article is available at <a href="https://github.com/satansdeer/ssr-example" rel="noopener noreferrer nofollow">https://github.com/satansdeer/ssr-example</a>, and a video version of this article can be found at <a href="https://www.youtube.com/watch?v=NwyQONeqRXA" rel="noopener noreferrer nofollow">https://www.youtube.com/watch?v=NwyQONeqRXA</a>.</p><p></p><p></p><p></p>

AUTHOR

Maksim Ivanov

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

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Server Side Rendering with React

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript