进行服务器端渲染时出错

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

你问了两个问题。我会一一解答：

React 生产警告

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

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

React 尝试重新使用标记

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

进行服务器端渲染时出错

Error when I make a server-side rendering

reactjs

server-side-rendering