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

由于Webpack 4和react-loadable，我只是在服务器端使用代码拆分和动态导入渲染React 16应用程序。

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

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

在客户端，在呈现已加载的组件之前，我呈现了一种加载组件。

因此，基本上，服务器呈现了加载的组件:

<div>loaded component</div>

然后客户端将加载组件水化:

<div>loading...</div>

显然，问题在于React在hydrat()之后提示，因为服务器和客户端之间缺少匹配。

在几秒钟内，客户端首先渲染

<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方法创建了一个Promise，一旦应用程序块被预加载，它将成为resolved，这样，由于拥有初始阶段所需的所有 Assets ，因此ReactDOM.hydrate将产生与服务器相同的输出。

提示

我也建议您看看React Loadable SSR Add-on，它是一个非常方便的add-on，它将增强您的服务器端 Assets 管理，为您提供与CSR(客户端渲染)相同的好处。



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

关于webpack-4 - SSR : dynamic import in react app how to deal with html miss match when component is loading on the client，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53195429/