5

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?

Jacob Mason
  • 1,355
  • 5
  • 14
  • 28

2 Answers2

4

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:

Community
  • 1
  • 1
markthethomas
  • 4,391
  • 2
  • 25
  • 38
  • Hi Mark, thank you for the prompt reply. Is there any point going through this pain if this is an internal application? Are there any security concerns with the application simply running client-side? – Jacob Mason Mar 28 '16 at 21:40
  • My pleasure! That really depends. As for the second part of your question, two things: React is generally very security-aware, and one of the goals of the library is to make it easy to be safe. You can use methods that are dangerous, but React forces you to be really explicit about it ("essentially :I'm being dangerous!" -> `dangerouslySetInnerHtml`). And second, making it universal wouldn't obviate any client-side vulnerabilities that already existed – markthethomas Mar 28 '16 at 21:43
  • See especially http://jamesknelson.com/universal-react-youre-doing-it-wrong/#comment-16199 on private/internal apps where it doesn't really matter the way a public facing situation might – markthethomas Mar 28 '16 at 21:45
  • Perfect. That has indeed saved me a lot of pain. – Jacob Mason Mar 29 '16 at 07:32
1

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.

Akshat Mahajan
  • 9,543
  • 4
  • 35
  • 44