Note: This applies to older versions of React. If you’re using React 16, you should use ReactDOM.hydrate()
Also, the below suggestion will result in a client-side re-render, as suggested by one of the answers below.
This may sound crazily simple, but in your server-side template, wrap your React markup in an extra <div>
:
<!-- hypothetical handlebars template -->
<section role="main" class="react-container"><div>{{{reactMarkup}}}</div></section>
Why does this work? On the client, React has a propensity to wrap its rendering of your root component with a superfluous div. ReactDOMServer.render
doesn’t seem to behave in this manner, thus when one renders into the same container isomorphically, the Adler-32 checksum of your DOM differs.