Javascript 使用vue时如何使用React.hydrate？

这里有点奇怪-我有一个用Vue编写的网站，我想演示一个用react编写的库。我可以通过包装

ReactDOM.hydrate（ReactApp，document.getElementById（'react'area'））

来避免服务器端渲染（SSR），但我不想这样做。我想把所有东西都渲染成SSR，但我不知道怎么可能

以下是我的vue的

renderOnServer.js

：

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
          }
        })
      })
    })
});

上面的

server.js

只是在寻找合适的vue组件和渲染。我有一个测试组件：

import React from 'react'

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

<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>

从“React”导入React
导出默认类ReactApp扩展React.Component{
render（）{
返回(
天鹅会
)
}
}

和我的vue组件：

import React from 'react'

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

<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>

演示
从“./ReactApp.jsx”导入ReactApp
从“react dom”导入react dom
导出默认值{
数据（）{
返回{
}
},
}
ReactDOM.hydrate（ReactApp，document.getElementById（“#react page”））

但很明显，它不会工作，因为我不能在SSR中使用文档

基本上，的目的是将在浏览器中呈现的react DOM与来自服务器的DOM相匹配，并避免在加载时进行额外的呈现/刷新

正如注释中所指出的那样，水合物应在客户端使用，而React应在服务器上使用

例如，在服务器上，它看起来像这样：

const domRoot = (
  <Provider store={store}>
    <StaticRouter context={context}>
      <AppRoot />
    </StaticRouter>
  </Provider>
)
const domString = renderToString(domRoot)

res.status(200).send(domString)

---

你读过这个文档了吗？我不知道如何在react中使用它。如果你能。。。有一个好处您是否尝试在vue组件上导入自定义react库并注册它？是的，这比

react有点难。Hydroid

不打算在服务器上运行。呈现React组件的Vue组件需要在客户端上调用

ReactDOMServer.renderToString

或调用

React.Hyde

。可以在

mounted（）

中调用

hydrate

。您需要以某种方式执行此操作，以便

ReactDOMServer

不是包装器的依赖项，因此它仅存在于服务器代码中。您可以使用依赖项注入将其提供给服务器上的应用程序。然后，如果提供了，则使用它，如果没有，则调用

React.hydrome

。不过，您仍然需要连接状态等。

<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>