Remy Sharp on React Server Side Rendering

Dec 15, 2016

Remy Sharp just posted his thoughts on creating with a Universal JavaScript stack of Node, Express and React. I have also recently finished up a project with the same stack. I think Remy’s experience mirrors my own in many ways.

On using Express with React Router:

I spent a long time (relative to the time spent on this project) trying to understand how to connect the client side routing mechanism to Express running in node. I did use react-engine successful for a while, but had to eject the code towards the end of the project because it restricted how I could actually use React Router.

The final solution is to use a catch all route that hands off to React Router which correctly generates all the markup (as per the sequence described earlier).

The thing that feels a little weird here is that I’m using Express’ routing system for the first layer of requests, then I defer to React’s router, which, does work, and doesn’t create any actual code duplication, but feels…strange.

The node server code is awkward and feels too easy. Express just exists to hand off to React Router’s match utility.

I also found Webpack very confusing, there’s some much to configure and finding the right setup was tricky (I went through about four iterations). I did find the right setup (for me) in the end, and I’ll probably copy and paste it again, but this isn’t something I want to have to learn.

Webpack is the worst.

The hot module reloading for React did work for a lot of the view code, but not for everything (in the client) and did require a refresh of the browser fairly frequently. It certainly helped, but again, wasn’t as smooth as my typical development workflow.

I ended up turning off hot reloading because of it’s lack of predictability. A CMD+R never killed anyone.

Bottom line: I would use this approach again. Having a large base of reusable code is very appealing. I’m not sure I have the right development approach (for me), but as with anything, that would come with time. I’m also interested in trying this approach with other JavaScript libraries out there (if possible), including Vue, Ember and Polymer (my brief experiences of Angular so far have been enough for me).

SSR has a long way to go before its a mature stack choice.