Server-side rendering with create-react-app, code-splitting, preloaded data, React Router, Helmet, Redux, and Thunk

I feel we’ve been here a million times before. Your brand new web application is served hot and ready in the cloud. Component structure is well-organized. UI is on fleek. But Facebook’s sharing debugger throws shade.

I’ve spoken about this before. For a million and a half reasons you cannot seem to get social networks and some search engines to play nice and just respect your damn content. Here we are again, with the latest toys and a few new additions. If you want to read about why server-side rendering is necessary for many deployed applications, feel free to read my previous article. In this tutorial, I’ll mostly be hopping around showing off individual portions of how to accomplish the greater goal. If you want the full picture, head over to the Github repo. You can also view the final product in all it’s beautiful form.

I set out to create the best damn server-rendered create-react-app application possible. Easier said than done.

Goals

1. Zero modifications to your existing CRA application
2. Create React App without ejecting
3. React 16 (fiber, baby!)
4. React Router v4 (with Thunk, via Connected React Router)
5. Full SEO support via React Helmet
6. Preloaded page data via async/await and React Frontload