3

我有一个应用程序，我在其中配置了服务器端渲染。一切正常，我的组件在服务器上呈现。问题是我的组件在屏幕上呈现了两次。一个来自<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})
})

服务器渲染

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

2 回答 2

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>
于 2017-06-04T01:44:52.833 回答
0

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

在 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。然后它会运行一次:)

于 2019-06-07T08:49:02.390 回答