React组件使用服务器端渲染进行了两次渲染

我有一个配置服务器端渲染的应用。一切正常，我的组件在服务器上呈现。问题是我在屏幕上渲染了两次组件。一个来自我用于服务器渲染的<div id="content"><%- content %></div>，其中一个来自<script src="http://localhost:3001/bundle.js"></script>。我使用webpack为我的服务器和客户端制作两个捆绑包。为什么会发生这种情况，我该如何解决？

视图/index.ejs

<body>
  <div id="app"></div>
  <div id="content"><%- content %></div>
  <script src="http://localhost:3001/bundle.js"></script>
</body>

index.js

app.use(Express.static(path.join(__dirname, '../', 'dist')))
app.use(serverRenderer)
app.get('*', (req: Object, res: Object) => {
  res.render('index', {content: req.body})
})

serverrender

import React from 'react'
import ReactDOM from 'react-dom/server'
import { match, RouterContext } from 'react-router'
import routes from '../client/routes.js'
async function render (component) {
  const content = ReactDOM.renderToString(component)
  return content
}
async function getMatchParams (routes, currentUrl) {
  return new Promise((resolve, reject) => {
    match({routes: routes, location: currentUrl}, (err, redirect, props) => {
      if (err) {
        return reject(err)
      }
      return resolve(props)
    })
  })
}
export default async(req, res, next) => {
  const renderProps = await getMatchParams(routes, req.url)
  if (renderProps) {
    const component = (
      <RouterContext {...renderProps} />
    )
    req.body = await render(component)
    next()
  }
}

好。我发现了一个问题。我指的是用两个单独的<div>捆绑和服务器渲染的字符串。在我的 app.js 我正在这样做

render(
    <Router history={browserHistory}>
      {routes}
    </Router>,
  document.getElementById('app')
)

这就是为什么我应该将字符串发送到这样的模板的原因。

app.use(Express.static(path.join(__dirname, '../', 'dist')))
app.use(serverRenderer)
app.get('*', (req: Object, res: Object) => {
  res.render('index', {app: req.body})
})

最后我的 views/index.js 应该看起来像

<body>
  <div id="app"><%- app %></div>
  <script src="http://localhost:3001/bundle.js"></script>
</body>

我也遇到了这个问题并找到了解决方案。

on package.json，

"start": "npm-run-all --parallel dev:*",

它将运行WebPack和Node Build/bundle.js。然后发生2件事，同时发生了webpack build project，node build/bundle.js

WebPack构建项目后，node build/bundle.js自Bundle.js被更改后再次运行。

因此，服务器和客户端都有两次通话。我很容易解决这个问题。

首先运行npm run build，然后运行node build/bunde.js。然后它将运行一次：(

相关内容

最新更新

热门标签：