Some Background on Server

Rendering at Airbnb
Historically, Airbnb has been a Rails app. A few years back that
started to change, we began using Rails simply as a data layer, and
all render logic started migrating into JavaScript in the form of
React. In order to maintain server rendering, we created and open
sourced Hypernova, a JavaScript Rendering as a Service… service.

Taking this a step further, we introduced client side routing and

route based code-splitting with React Router v3 as part of our
architecture revamp. This is what enabled the smooth page
transitions, and smaller initial page loads.

Enter React Router v4

Server rendering + code splitting boils down to a single
requirement. In order for them to work together you need to be
able to match against your current route before rendering.
(The rest of this post is fairly code heavy, if you aren’t already
familiar with RRv4, take some time to read over the excellent
React Router documentation. Also, it wouldn’t hurt to look over
the webpack code-splitting documentation.)

The problem then, is that React Router v4 switched from a

centralized route configuration (with a getComponent function for
async loading) to a decentralized version. Routes are now defined
inline like so:

Defining routes in this manner means you won’t know which

routes/components are needed to render your page until you are
actually rendering. To demonstrate why this is a problem, imagine
we’re async loading the About component.

When we server render, we’ll want to render all of the content, so

the html for the About component will be generated and inserted
into the DOM tree. On the client side though, we won’t know to
match the /about route nor would we know to load the About
component, until after we’ve already entered the render cycle.
This will cause a client/server mismatch error since without
having the About component loaded, the client won’t create the
same html as the server. This also likely means a flash of content
and a wasted render, meaning a worse experience for your users.