Isomorphic React means I need to load my data twice?

[Carlos Ramirez]

Following this post:

https://strongloop.com/strongblog/node-js-react-isomorphic-javascript-why-it-matters/

I made an app that uses isomorphic react. The problem is that once I load my react components client-side, I get the following warning in the console:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server

Because the client-side React generated markup was not passed the data that was used for the server-side React generated markup, the client generated an empty app so to speak, and that overrode the markup from the server, resulting in nothing displayed.

In the example from the blog post, the parent component loads it's own data from a file, via a require call. This works because gulp compresses this fake data along with the React components, so the client-side scripts have the data they need hardcoded.

I got around this by loading the data twice: the route in the server makes calls to the API by using the model object to get the data for the component, and the client side script uses jquery to do GET requests to the api to pass that same data to the client-side component.

Thus the markup generated by the server and client match and I got my isomorphic React working. However, there's no way that loading the same data twice is the right way to do this. Obviously, neither is having my data hardcoded to a file, so what is the right way to do isomorphic React with loopback?