Lazy load and lazy hydrate Nextjs component

lazyLoadHydrate.js

import dynamic from 'next/dynamic';
import withHydrationOnDemand from 'react-hydration-on-demand';

export default function lazyLoadHydrate<T = Record<string, never>>(
  module,
  ssr = false,
  loading = () => <span>Loading</span>,
) {
  return withHydrationOnDemand({
    on: ['visible'],
    onBefore: module // Make sure we load component before hydrating it
  })(dynamic(module, { loading, ssr }));
}

What if I used ReactDOMServer to make Loading component, so we can prevent the flash? 🤔

Updated v2 with

onBefore: module

By wait chunk code to load before hydrating, we can prevent flashing on client side

Looking good! Could you shine some light on how to control when the hydration data gets lazy loaded?

Edit: Got it, it depends on when react-hydration-on-demand wants to hydrate. The key is the on:.