Как использовать React.hydrate при использовании vue?

Немного странная ситуация - у меня есть веб-сайт, написанный на Vue, и я хочу продемонстрировать библиотеку, которую я написал в реагировать. Я могу избежать рендеринга на стороне сервера (SSR), оборачивая ReactDOM.hydrate(ReactApp, document.getElementById('react'area')) но я не хочу этого делать. Я хочу сделать все SSR, но я не вижу, как это возможно.

Вот мой renderOnServer.js для vue:

process.env.VUE_ENV = 'server'

const fs = require('fs')
const path = require('path')

const filePath = './App/dist/server.js'
const code = fs.readFileSync(filePath, 'utf8')

const vue_renderer = require('vue-server-renderer').createBundleRenderer(code)

//prevent XSS attack when initialize state
var serialize = require('serialize-javascript')
var prerendering = require('aspnet-prerendering')

module.exports = prerendering.createServerRenderer(function (params) {
  return new Promise((resolve, reject) => {
      const context = {
        url: params.url,
        absoluteUrl: params.absoluteUrl,
        baseUrl: params.baseUrl,
        data: params.data,
        domainTasks: params.domainTasks,
        location: params.location,
        origin: params.origin,
        xss: serialize("</script><script>alert('Possible XSS vulnerability from user input!')</script>")
      }
      const serverVueAppHtml = vue_renderer.renderToString(context, (err, _html) => {
        if (err) { reject(err.message) }
        resolve({
          globals: {
            html: _html,
            __INITIAL_STATE__: context.state
          }
        })
      })
    })
});

Поэтому в основном я настраиваю SSR выше для чтения server.js:

import { app, router, store } from './app'

export default context => {
  return new Promise((resolve, reject) => {
    router.push(context.url)

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()

      if (!matchedComponents.length) {
        return reject(new Error({ code: 404 }))
      }

      Promise.all(matchedComponents.map(Component => {
        if (Component.asyncData) {
          return Component.asyncData({ store, context })
        }
      }))
        .then(() => {
          context.state = store.state
          resolve(app)
        })
        .catch(reject)
    }, reject)
  })
}

и server.js выше просто ищет правильный компонент vue и рендеринг. У меня есть тестовый компонент:

import React from 'react'

export default class ReactApp extends React.Component {
    render() {
      return (
        <div>Hihi</div>
      )
    }
  }

и мой компонент Vue:

<template>
  <div id="page-container">
    <div id="page-content">
      <h3 class="doc-header">Demo</h3>

      <div id="react-page">

      </div>
    </div>
  </div>
</template>
<script>
<script>
  import ReactApp from './ReactApp.jsx'
  import ReactDOM from 'react-dom'

  export default {
      data() {
          return {
          }
      },
  }

  ReactDOM.hydrate(ReactApp, document.getElementById('#react-page'))
</script>

Но, очевидно, это не сработает, потому что я не могу использовать документ в SSR.

Как использовать React.hydrate при использовании vue?

Ответы