Making CRA apps work with SSR

Written by zhirzh | Published 2017/11/07
Tech Story Tags: react | server-side-rendering | guide | redux | react-router

TLDRvia the TL;DR App

Make SSR simple again

I have updated the articles in this series for React v16. The code for older versions of react is now here on github.

This series of posts is all about rendering react apps on the server that were built using create-react-app. The code is here on github.

Part 1: Off to a simple start

A simple start with a barebones app that can’t even deal with CSS. It does help explain the process involved though.

Part 2: Adding support for static assets

Once the base system is up and running, it’s time to make it work with CSS (and other assets).

Part 3: Integrating Redux

It’s no surprise that redux is a popular choice for data management and it’s a must to have strong support for it in the server rendering pipeline.

Part 4: Routing with react-router

We’ll explore static and dynamic routing with react-router, along with handling route params and redux integration.

The “why” and The “how” Part

Ever since I came across React back in 2015, I have loved working with it. The experience was a massive paradigm shift. From cluttered, spaghetti jQuery to something more refined.

Eventually, I started feeling effects of “the” fatigue. Starting each new project required a ton of manual labour which always seemed tiny at first, but grew in size rapidly.

I started looking for a solution. Templates, boilerplates and fair chunk of generators later, I found create-react-app.

create-react-app

CRA was the solution I was looking for. In time, it became my goto starting point. Best of all, it plays pretty well with other projects from react ecosystem.

But by no means is it be all end all solution as CRA doesn’t support server rendering. Yet.🤞

Server rendering

I took all the bits and pieces I found and tried to put glue together into something that just works. This series is my way of documenting the process.


Published by HackerNoon on 2017/11/07