小编Raf*_*bre的帖子

我知道如何进行延迟水合，并且知道如何进行代码分割，但是如何才能仅在组件水合时才下载分割的块？

我的代码看起来像这样

import React from 'react';
import dynamic from 'next/dynamic';
import ReactLazyHydrate from 'react-lazy-hydration';

const MyComponent = dynamic(() => import('components/my-component').then((mod) => mod.MyComponent));

export const PageComponent = () => {
  return (
    ...
    <ReactLazyHydrate whenVisible>
      <MyComponent/>
    </ReactLazyHydrate>
    ...
  );
};

MyComponent呈现在折叠下方，这意味着它只会在用户滚动时才会水合。问题在于，页面加载时，JS chunksMyComponent将立即下载。

我能够通过仅在客户端上使用动态导入来破解它，但这会使组件在水合时消失一秒钟，因为在服务器上渲染的 html 不会被 React 使用。它将重新创建 DOM 元素，并且在 JS chunk 加载之前它将为空。当元素消失一秒钟时，它会增加页面 CLS，这就是我不能使用此 hack 的主要原因。这是这个黑客的代码

const MyComponent = typeof window === 'undefined'
    ? require('components/my-component').MyComponent
    : dynamic(() => import('components/my-component').then((mod) => mod.MyComponent));

请注意，我想在服务器渲染上渲染组件的 HTML。这就是为什么我不想延迟加载它。我想要 Lazy Hydrate，这样我就可以在服务器上呈现组件的 HTML，但仅在可见时下载并执行它的 JS。