サーバーサイドのレンダリングを行うときのエラー

Question

私はサーバー側のレンダリングを行い、コンソールを表示するためにWebを開くと2つのエラーメッセージが表示されます。

まずエラーメッセージ：私はこのプラグインを使用してください私のwebpack.config.jsで

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. 

。

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

2番目のエラーメッセージ：

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

次の2つの質問をされています。私はそれらを一つずつ取り上げます。

あなたはWebPACKのを使用しているので、あなたがあなたのビルドで死んだコードを排除するためにDefinePluginプラグインを使用することができます

生産警告が反応します。 ReactJsには、開発環境でメッセージを記録する多くのロギングコードがあるため、これが必要です。

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

このエラーは一目瞭然である再利用のマークアップ

しようと反応します。サーバーから送信されるレンダリングされたHTMLコードは、クライアント側でレンダリングされるDOMと一致しません。これは、通常、使用しているコンポーネントにサーバー上で実行されていない非同期コードがある場合に発生します。 Reduxを使用している場合は、tutorialに従うことで、サーバー上のredux状態をレンダリングできます。