title: Lazy Hydrate + Code Splitting on NextJS app
body: <p>I know how to do Lazy Hydration and I know how to do Code Splitting, but how can I make the splitted chunck download only when the component is hydrating?</p>
  <p>My code looks like this</p>
  <pre><code>import React from 'react';
  import dynamic from 'next/dynamic';
  import ReactLazyHydrate from 'react-lazy-hydration';
  
  const MyComponent = dynamic(() =&gt; import('components/my-component').then((mod) =&gt; mod.MyComponent));
  
  export const PageComponent = () =&gt; {
    return (
      ...
      &lt;ReactLazyHydrate whenVisible&gt;
        &lt;MyComponent/&gt;
      &lt;/ReactLazyHydrate&gt;
      ...
    );
  };
  </code></pre>
  <p><code>MyComponent</code> is rendered below the fold, which means that it is only gonna hydrate when the user scrolls. The problem is that the JS chunck for <code>MyComponent</code> will be downloaded right away when the page loads.</p>
  <p>I was able to hack it by using the dynamic import only on client but this makes the component disappear for a second when it hydrates, because the html rendered on server will not be used by react. It will recreate the DOM element and it will be empty until the JS chunck loads.
  When the element disappear for a sec it increases the page CLS and that's the main reason why I can not use this hack.
  Here is the code for this hack</p>
  <pre><code>const MyComponent = typeof window === 'undefined'
      ? require('components/my-component').MyComponent
      : dynamic(() =&gt; import('components/my-component').then((mod) =&gt; mod.MyComponent));
  </code></pre>
  <p>Note that I want to render the component's HTML on the server render. That't why I don't want to Lazy Load it. I want to Lazy Hydrate so I can have the component's HTML rendered on server but only download
  and execute it's JS when it is visible.</p>