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/

Answer 2

You need Node.js to make an isomorphic web app.

This is because an isomorphic application requires an appropriate server-side runtime to execute the React Javascript code on the server. I don't believe IIS has support for parsing Javascript exactly - only Node has this runtime.

If you aren't using Node, then you should introduce it at some stage in your application. You can use IIS as a reverse proxy: create a Node server for IIS to forward requests to, let Node render the React as static HTML using renderString , and then have Node respond to requests from IIS with the rendered HTML. IIS will act as middleman for all incoming requests and responses.

Reverse proxies add some minor latency to an application, but, as always, premature optimisation is the root of all evil.