First: Server-side rendering

Probably the most complex part of this upgrade is adding SSR. CRA by its own doesn’t offer support for this, and its devs don’t even plan to:

Ultimately server side rendering is very hard to add in a meaningful way without also taking opinionated decisions. We don’t intend to make such decisions at this time. — Dan Abramov

But having SSR is something every developer is craving for. So let’s begin!

For the purpose of this article, we’ll use express.js:

yarn add express

Create a /server folder next to our /src folder. CRA’s build tools will not parse and compile anything outside the src folder. This is fine, as no code from server will be used inside our client app.

Now we need an entry point for our server app. Create a file at /server/index.js:

So what’s with that serverRenderer thing? That’s an express middleware which will render our html. Our /server/middleware/renderer.js file looks like this:

There’s one final step here: Node doesn’t speak JSX, so we need to transpile our code with babel. For this, create a /server/bootstrap.js file that will tell Node how to interpret our code (we’ll actually use this as an entry point):

You will also need to install these additional packages: babel-preset-es2015, babel-preset-react-app, ignore-styles.

That’s it! Now run the server:

node server/bootstrap.js

You can extend your server app however you want, but the above is the minimum you’ll need for server-side rendering a React app with CRA.