How to use React.hydrate when using vue?

Basically, the purpose of hydrate is to match react DOM rendered in browser to the one that came from the server and avoid extra render/refresh at load.

As it was pointed in the comments hydrate should be used on the client-side and React should be rendered on the server with renderToString.

For example, on the server it would look something like this:

const domRoot = (  <Provider store={store}>    <StaticRouter context={context}>      <AppRoot />    </StaticRouter>  </Provider>)const domString = renderToString(domRoot)res.status(200).send(domString)

On the client:

<script>  const domRoot = document.getElementById('react-root')  const renderApp = () => {    hydrate(      <Provider store={store}>        <Router history={history}>          <AppRoot />        </Router>      </Provider>,      domRoot    )  }  renderApp()</script>

Technically, you could render React components server-side and even pass its state to global JS variable so it is picked up by client React and hydrated properly. However, you will have to make a fully-featured react rendering SSR support(webpack, babel at minimum) and then dealing with any npm modules that are using window inside (this will break server unless workarounded).

SO... unless it is something that you can't live without, it is easier, cheaper and faster to just render React demo in the browser on top of returned Vue DOM. If not, roll up your sleeves :) I made a repo some time ago with react SSR support, it might give some light on how much extra it will be necessary to handle.

To sum everything up, IMO the best in this case would be to go with simple ReactDOM.render in Vue component and avoid React SSR rendering:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script><script src="my-compiled-react-bundle.js"></script><script>  function init() {    ReactDOM.render(ReactApp, document.getElementById('#react-page'))  }  init();  </script>