If you’re in a hurry — example here! Watch for source code in the browser

Howdy! We’re going to setup our create-react-app with server side rendering. Why server side rendering? How is it different from client side rendering? Well, in a nutshell SSR has better SEO and performance compared to CSR (client side rendering). With this approach, you can still have the benefits of client side rendering (no full reloads, smooth user experience) and still have the SEO of a fully SSR app.

If you’re interested in the nitty gritty and benchmarks — I’ve found a great post explaining in detail SSR vs CSR. 😊

Without further ado, let’s begin!

You probably have it but just in case you don’t have the create-react-app package, install it with yarn

$ yarn global add create-react-app

Next — fire up our create-react-app setup

$ create-react-app ssr-react

Okay great!

The past solutions for working with SSR and react were really complicated, for instance setting up a proxy server and all that kind of stuff. Fortunately, I’ve discovered a package called react-snapshot