Simplified approach for hydrating statically-rendered React components on the client.

client.js

import React from 'react'
import ReactDOM from 'react-dom'

const hydrateComponent = (scriptEl) => {
  const componentId = scriptEl.getAttribute('data-hydration-data-id')
  const componentElement = document.querySelector(`[data-hydration-component-id="${componentId}"]`)
  const props = JSON.parse(scriptEl.innerHTML)
  
  import(componentId).then(Component => ReactDOM.render(<Component {...props} />, componentElement))
}
                           
[].slice.call(document.querySelectorAll('[data-hydration-data-id]')).forEach(hydrateComponent)

hydrator.js

import React from 'react'
import ReactDOMServer from 'react-dom/server'

export default function Hydrator (props) {
  const Component = props.Component
  const componentId = Component.displayName
  
  delete props.Component

  return (
    <div>
      <div data-hydration-component-id={componentId}>
        <Component {...props} />
      </div>

      <script
        data-hydration-data-id={componentId}
        type="application/hydration-data"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(props) }}
      >
    </div>
  )
}