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

Question

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

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

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

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

所以基本上服务器渲染加载的组件：

<div>loaded component</div>

客户端水合加载组件：

<div>loading...</div>

很明显，问题是 React 在 hydra() 之后抱怨，因为服务器和客户端之间存在不匹配。

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

<div>loading...</div>

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

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

Answer 1

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

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

这也是avoidhydration mismatch 的必需步骤。

原因：

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

所以，Loadable.preloadReady 方法会创建一个 Promise，一旦预加载应用程序块，resolved 将具有初始阶段所需的所有资产，ReactDOM.hydrate 将生成与您的相同的输出服务器做到了。

---

提示

另外我建议你看看React Loadable SSR Add-on，这是一个非常方便的add-on，它将增强你的服务器端资产管理，给你带来与CSR（客户端渲染）相同的好处。

React Loadable 的服务器端渲染插件。加载拆分的块从未如此简单。

见https://github.com/themgoncalves/react-loadable-ssr-addon