服务器端呈现和异步路由，客户端的空白闪存与react @ 16

Question

当我在服务器端渲染同步路由然后客户端为dom加水时，我收到警告，因为客户端异步路由找不到组件。

另一方面，反应纤维调和试图去除这个不可水合的节点。因此页面在客户端闪烁空白:(

根据下一个屏幕截图，将删除从服务器端渲染生成的节点。此节点（div.home-page）是当前路径的动态组件

那么，我怎么能告诉调和者不要删除这个节点，因为它会被动态导入的相应组件水合？

一些代码段以获得更多解释

路线定义

import {
  HomePage,
} from '../bundles/Bundles';

export default [
  {
    component: HomePage,
    path: '/',
    exact: true,
    strict: true,
  },
];

服务器端使用的Bundles.js

export const HomePage = syncComponent('HomePage', require('../views/HomePage/HomePage'));

客户端使用的AsyncBundles.js

export const HomePage = asyncComponent('HomePage', () => Promise.all([
  import('../views/HomePage/HomePage' /* webpackChunkName: 'HomePage' */),
  importCss('HomePage'),
]));

感谢 NormalModuleReplacementPlugin webpack插件，我能够从Bundles.js和AsyncBundles.js切换服务器和客户端呈现

new webpack.NormalModuleReplacementPlugin(/Bundles\.js/, 'AsyncBundles.js')

HomePage.js组件呈现一个简单的div

<div className="home-page">Home Page</div>

呈现路线的主要Wrapper.js

  <Route
    render={({ location }) => (
      <div className="app__wrapper">
        <Switch location={location}>
          {routes.map((route, index) => (
            <Route
              key={route.path}
              path={route.path}
              exact={route.exact}
              render={route.component}
            />
          ))}
          <Route
            key={'not found'}
            path={'*'}
            render={NotFound}
          />
        </Switch>
      </div>
    )}
  />

服务器端生成的html如下所示：

<div class="app__wrapper">
  <div class="home-page">
    Home Page
  </div>
</div>

当我打开chrome调试器时间轴时，我得到一个闪烁的空白框架

在空白帧之前，它是渲染的html，之后是已渲染的分块HomePage.123456.js