SSR：在反应应用程序中动态导入如何在客户端加载组件时处理 html 未匹配

Question

由于 webpack 4 和 react-loadable，我刚刚开始在服务器端使用代码拆分和动态导入来渲染 react 16 应用程序。

我的问题可能听起来很愚蠢，但有些事情我不太明白。

在服务器端，我在等待 webpack 加载所有模块，然后再将 html 吐出到客户端。

在客户端，在渲染加载的组件之前，我渲染了一种加载组件。

所以基本上服务器呈现加载的组件：

<div>loaded component</div>

客户端对加载组件进行水合：

<div>loading...</div>

显然，问题是 React 在 hydrate() 之后抱怨，因为服务器和客户端之间存在未命中匹配。

在几秒钟内，客户端首先呈现

<div>loading...</div>

而服务器已呈现并发送到客户端，加载组件的 html。

有人可以启发我吗？它是如何工作的？加载组件时如何防止首次渲染时出现不匹配？

Answer 1

看来您没有在客户端中预加载同意。

Loadable.preloadReady().then(() => {
  ReactDOM.hydrate(<App/>, document.getElementById('app'));
});

这也是必要的avoid一步hydration mismatch。

原因：

此问题是在您的客户端上引起的，因为您的初始请求chunks未加载，因此html output这些组件的会loading...代替其component content本身。只有在获取并加载块之后，该初始状态loading...才会被所需的内容替换。

因此，Loadable.preloadReady方法创建一个Promise，一旦resolved应用程序块被预加载，这样，拥有初始阶段所需的所有资产，ReactDOM.hydrate将生成与服务器相同的输出。

提示

另外我建议您看一下React Loadable SSR Add-on，它非常方便add-on，可以增强您的服务器端资产管理，为您提供与 CSR（客户端渲染）相同的好处。

React Loadable 的服务器端渲染插件。加载分割的块从来没有那么容易。