webpack-4 - SSR : dynamic import in react app how to deal with html miss match when component is loading on the client

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本身。
只有在获取并加载 block 后，此初始状态 loading...将替换为所需的内容。

所以，Loadable.preloadReady方法创建一个 Promise那将是 resolved一旦应用程序 block 被预加载，以这种方式，拥有初始阶段所需的所有 Assets ，ReactDOM.hydrate将生成与您的服务器相同的输出。

提示

另外我建议你看看React Loadable SSR Add-on ，非常好用add-on这将增强您的服务器端 Assets 管理，为您提供与 CSR(客户端渲染)相同的好处。

Server Side Render add-on for React Loadable. Load splitted chunks was never that easy.

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