Ошибка при создании рендеринга на стороне сервера

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, чтобы отобразить состояние редукции на сервере.