Question

我进行服务器端渲染，当我打开网页查看控制台时，我收到了2条错误消息。

第一条错误消息：

Warning: It looks like you're using a minified copy of the development
build of React. When deploying React apps to production, make sure to
use the production build which skips development warnings and is
faster. See https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build for more details.

在我的webpack.config.js中，我确保使用了这个插件。

plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false 
]

第二条错误消息：

Warning: React attempted to reuse markup in a container but the
checksum was invalid. This generally means that you are using server
rendering and the markup generated on the server was not what the
client was expecting. React injected new markup to compensate which
works but you have lost many of the benefits of server rendering.
Instead, figure out why the markup being generated is different on 
the client or server:

    (client) id="27" >< option id="cbhlnhfolziayudi" da
    (server) id="27" >< option id="dktswsr" data-reacti

Answer 1

你问两个问题。我将逐一解决这些问题：

反应生产警告

由于您使用的是Webpack，因此可以使用DefinePlugin插件来消除构建中的死代码。这是必要的，因为ReactJs有许多日志代码可以在开发环境中记录消息。

plugins: [
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.DefinePlugin({
         'process.env.NODE_ENV': '"production"',
      }),
   ],

React尝试重新使用标记

此错误非常明显。从服务器发送的呈现HTML代码与在客户端呈现的DOM不匹配。当您使用的组件具有未在服务器上运行的异步代码时，通常会发生这种情况。如果您使用的是Redux，则可以按照此tutorial在服务器上呈现redux状态。

进行服务器端渲染时出错

1 个答案: