由于 webpack 4 和 react-loadable，我刚刚开始使用代码拆分和动态导入在服务器端渲染一个 react 16 应用程序。
我的问题可能听起来很愚蠢，但有些东西我不太明白。
在服务器端，我正在等待 webpack 已加载所有模块，然后再将 html 吐出给客户端。
在客户端，在渲染加载的组件之前，我渲染了一种加载组件。
所以基本上服务器渲染加载的组件：
<div>loaded component</div>
客户端水合加载组件：
<div>loading...</div>
显然，问题在于 React 在 hydrate() 之后抱怨，因为服务器和客户端之间存在匹配错误。
在几秒钟内，客户端首先呈现
<div>loading...</div>
而服务器已经渲染并发送给客户端，加载组件的 html。
有人可以启发我吗？它是如何工作的？加载组件时如何防止在第一次渲染时出现不匹配？
看起来您没有在客户端中预加载同意。
Loadable.preloadReady().then(() => {
ReactDOM.hydrate(<App/>, document.getElementById('app'));
});
avoid这也是hydration mismatch.
原因：
此问题是在您的客户端上引起的，因为初始请求chunks未加载，因此html output这些组件将loading...代替其component content本身。只有在获取和加载块之后，这个初始状态loading...才会被所需的内容替换。
因此，一旦预加载了应用程序块，方法就会Loadable.preloadReady创建一个，这样，拥有初始阶段所需的所有资产，将生成与您的服务器相同的输出。PromiseresolvedReactDOM.hydrate
小费
另外我建议您看一下React Loadable SSR Add-on，它非常方便add-on，可以增强您的服务器端资产管理，为您提供与 CSR（客户端渲染）相同的好处。
React Loadable 的服务器端渲染插件。加载拆分块从未如此简单。