React re-hydration for multiple fragments

[Pixelatex]

Right... so what I'm trying to do is the following:

We have a fragment called "basic" for testing purposes.

I load this fragment 3 times in my template.

<div id="fragment1">
    <fragment src="http://localhost:3000"></fragment>
  </div>
<script type="text/javascript" fragmentID="fragment1" src="http://localhost:3000/cdn/client.js"></script>
<div id="fragment2">
    <fragment src="http://localhost:3000"></fragment>
  </div>
<script type="text/javascript" fragmentID="fragment2" src="http://localhost:3000/cdn/client.js"></script>
<div id="fragment3">
    <fragment src="http://localhost:3000"></fragment>
  </div>
<script type="text/javascript" fragmentID="fragment3" src="http://localhost:3000/cdn/client.js"></script>

So what I'm doing is server side rendering these fragments, returning the result.

Great, but I don't have react with those... so I load in the client.js file, which will do a hydrate with the div that has the correct ID as root. (e.g. div id 'fragment1' because the script gets 'fragment1' passed to it as parameter)

Now... my issue is that react will pick up 3 components but won't actually hydrate their content... only the first component will be hydrated correctly.

Do you guys have any solutions for this issue?