使用服务器端渲染两次渲染 React 组件答案

【问题标题】：React component rendered twice using server side rendering使用服务器端渲染两次渲染 React 组件
【发布时间】：2017-11-05 01:54:18
【问题描述】：

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

views/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})
})

服务器渲染

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

【问题讨论】：

标签： reactjs server-rendering

【解决方案1】：

好的。我发现了一个问题。我指的是带有两个单独的<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>

【讨论】：

【解决方案2】：

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

在 package.json 上，

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

它将运行 webpack 和 node build/bundle.js。然后两件事同时发生，webpack build project，node build/bundle.js

webpack 构建项目后，node build/bundle.js 再次运行，因为 bundle.js 已更改。

所以在服务器端和客户端都有两次调用。我很容易就解决了这个问题。

首先运行npm run build，然后运行node build/bunde.js。然后它会运行一次:)

【讨论】：