Question

背景

我正在开展基于反应的（MERN.io）项目（Eve's Temptation）。该项目的堆栈主要是React，Redux，Webpack，Node和Express。在我实现服务器端渲染之后。我发现，没有良好的网络连接，用户可以在一些渲染完成后看到全屏空白，然后重新渲染。所以它可能应该是一个重新渲染的问题。我在MERN.io上测试并在服务器端呈现的字符串

中添加了一个额外的div

自：

<div id="root">${html}</div>

要：

<div id="root"><div>${html}</div></div>

这可以解决

warning.js？8a56：33警告：React尝试在a中重用标记容器但校验和无效。这通常意味着你正在使用服务器呈现和服务器上生成的标记不是客户所期待的。反应注入新标记补偿哪些有效，但你失去了服务器的许多好处＆gt;渲染。相反，找出生成标记的原因在客户端或服务器上有所不同：

(client) <!-- react-empty: 1 -
(server) <div data-reactroot="

虽然我使用此方法解决了上述问题，但仍会出现白屏（客户端重新渲染）问题。

这里我使用https://github.com/Hashnode/mern-starter中的代码作为示例，这是我们基于。

的项目

客户端index.js：

/**
 * Client entry point
 */
import React from 'react';
import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import App from './App';
import { configureStore } from './store';

// Initialize store
const store = configureStore(window.__INITIAL_STATE__);
const mountApp = document.getElementById('root');

render(
  <AppContainer>
    <App store={store} />
  </AppContainer>,
  mountApp
);

// For hot reloading of react components
if (module.hot) {
  module.hot.accept('./App', () => {
    // If you use Webpack 2 in ES modules mode, you can
    // use <App /> here rather than require() a <NextApp />.
    const NextApp = require('./App').default; // eslint-disable-line 
global-require
    render(
      <AppContainer>
        <NextApp store={store} />
      </AppContainer>,
      mountApp
    );
  });
}

服务器：server.js

请在https://github.com/Hashnode/mern-starter

上查看

=======这里是如何重现问题：=======

第1步：

关闭生产模式的缩小，以便我们可以在浏览器中读取js代码并定位关键代码：

在webpack.config.prod.js中评论UglifyJSPlugin（第80~85行）：

  new ChunkManifestPlugin({
    filename: "chunk-manifest.json",
    manifestVariable: "webpackManifest",
  }),
  // new webpack.optimize.UglifyJsPlugin({
  //   compressor: {
  //     warnings: false,
  //   }
  // }),
],

第2步：

运行mongodb并在项目文件夹中运行npm run bs以运行产品模式

第3步：

在Chrome浏览器资源中，我们可以看到app.cb4f935522b22f1d48a0.js等js文件，我们可以在第10316行找到代码

// Initialize store
    var store = (0, _store.configureStore)(window.__INITIAL_STATE__);
    var mountApp = document.getElementById('root');

    (0, _reactDom.render)(_jsx(_reactHotLoader.AppContainer, {}, void 0, _jsx(_App2.default, {
      store: store
    })), mountApp);

第4步：

在(0, _reactDom.render)...上设置一个断点，在运行此函数之前，客户端已经使用服务器端呈现的文档呈现了一些内容，在单步执行此功能后，屏幕将为空白。

我试图找到一个避免重新渲染的解决方案，但这对我来说很难，

由于React客户端重新呈现DOM而实施服务器端呈现的空白屏幕

背景