D.i.S
Published in

D.i.S

Server Side Rendering and Create React App (aka React Scripts)

Create React App and React Scripts projects are probably the most well-known way to quickly set up the React-based application. The motto of the project is 100% no configuration, everything is based on convention. This is a fairly robust solution that has everything you need except for the Server Side Rendering support.

As one of the ways to solve this, official documentation suggests to inject initial data or use the static snapshots. Unfortunately, both have drawbacks. The first will not allow search engines to properly analyze the static HTML, and the second does not pass down any state except what’s contained in the markup, so if you use Redux then you have to choose something else.

I have upgraded the example from my previous article to be used with Create React App. Now the package is called Create React Server and is now capable of launching the server-side rendered website like so:

The authors of React Router determined that Google was indexing their sites well enough for our needs without server rendering, but one of the main reasons to do SSR is to deliver the content to users as fast as possible, sometimes it is even more important than tricking the Google bot.

Installation

First of all, let’s install the required packages:

Add .babelrc file or “babel” section to package.json

The preset babel-preset-react-app is installed along with react-scripts, but for server rendering we need to refer to it directly.

React Router’s endpoint page

Just like before, the essence of Server Side Rendering is to determine which page has to be displayed based on router’s routes, figure out which data this page needs, load it, render HTML and send it along with the data to the client.

Server takes the endpoint page, calls its getInitialProps, inside of which we can dispatch some Redux actions and return the initial set of props (if Redux is not used). This method will be called on a client too (not if server has sent data though), which greatly simplifies the initial data load procedure.

The prop initialError will have value if getInitialProps raised an exception.

The page that will be used as 404 stub should have static property notFound:

Router

The function createRoutes should return routes for React Router, async routes are also supported, but for simplicity let’s skip them:

Redux

The function createStore should take the initial state as an argument and return a new instance of Store:

Additional parameters with NodeJS Request and Response will be added when function is used on a server, they can be used to create an initial state from scratch because first parameter will be undefined in this case.

Main app entry point

Now let’s put everything together:

Start the server using simple CLI

We need to add a section scripts to package.json:

Now we can build & start the server:

If we open http://localhost:3000 in browser we will see the page that has been rendered by the server. If you change the route then client side will take care of all data for the page.

In this mode the server-side build is not saved, it is dynamically created every time the server is started.

Start the server using API

If the CLI server is not flexible enough or if you decide to keep the server build then you can use the API.

In addition to previously installed packages let’s install babel-cli, it will be used to build the server:

Add following commands to scripts section ofpackage.json:

The client part will still be built by Create React App (React Scripts), but the server with Babel, which will take everything from src and put the result in build-lib.

Run:

If we open http://localhost:3000 in browser we will see the same page that still has been rendered by the server.

More examples

This and other examples are available at https://github.com/kirill-konshin/react-router-redux-middleware/tree/master/examples/create-react-app.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kirill Konshin

Staff Software Developer @ RingCentral, Inc., Music Maker, Traveller, Photographer