reactjs-NextJS 应用程序上的 Lazy Hydrate + 代码拆分

我知道如何进行惰性水合作用，我知道如何进行代码拆分，但如何仅在组件水合作用时才能进行拆分的chunck下载？

我的代码如下所示

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 (
    ...
    
      
    
    ...
  );
};

MyComponent在折叠下方渲染，这意味着只有当用户滚动时，它才会水合。问题是JS chunckMyComponent将在页面加载时立即下载。

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

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

请注意，我想在服务器渲染器上渲染组件的HTML。这就是为什么我不想懒洋洋地加载它。我想延迟水合物，这样我就可以在服务器上呈现组件的HTML，但只在组件可见时下载并执行它的JS。