Converting React app to isomorphic app?

Question

I've developed a web application using React and Redux and then packed it with Webpack, it's hosted using IIS and presumably just runs client-side and makes calls to a Web API (.net for reasons); also hosted on IIS.

How do I make the jump and make this application 'isomorphic' so that the React code runs both client and server side?

Answer 1

You'll need a few things:

1) some way to run node: Really the only things that happen server-side with React are a renderToString call to give you strinigfied HTML you can send to clients (it's just a static HTML rendering of your app w/ React), hydration (see more on that in a bit) to get data into your components, and route-matching.

2) a router (if you have routes): If your app uses multiple routes, you'll need to use React-router to tell node what component(s) should be rendered

3) a good reason to go universal: there are some relatively simple aspects to going universal and there are some relatively complicated ones. Matching the routes isn't all that hard, and it will essentially just be you telling your server what to send down. The harder, more complicated part of universal JS w/ React is fetching data to send down to clients on initial render. This usually involves some server-side data fetching, so you have to have a way to both get the data and pass it into your app to be rendered correctly. There are ways to do this, but it is certainly a significant step up in terms of overall complexity.

This is how I did it, w/o the need for any server-side data fetching: Server side rendering with react, react-router, and express

See also:

• https://ifelse.io/2015/08/27/server-side-rendering-with-react-and-react-router/
• http://jamesknelson.com/universal-react-youre-doing-it-wrong/