React server-side and client side rendering not seamless

We need serialize data(or state) in server side, and send it to client side to deserialize, otherwise, the data in client side is different with the moment server render it. it will reload for sure.One exception: pure static page, in this case React recommend us use renderToStaticMarkup

Similar to renderToString, except this doesn't create extra DOM attributes such as data-react-id, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.

So, how we serialize - deserialize?Here is a simple version:in your index-server-local.html template:

   <script src="bundle.js"></script>

to:

   <script dangerouslySetInnerHTML={{{{__html: 'window.__data=' + JSON.stringify({key: 'value'})}}}} />   <script src="bundle.js"></script>

And in client side, we can use __datadata now. how to map the data to your component it's based on your choice.

I recommend Reudx for this:

   createStore(browserHistory, initialState)

And then

   <Provider store={store}>     { component }   </Provider>