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

How to use?

const NewsletterSignupV2 = lazyLoadHydrate(
  () => import('../NewsletterSignupV2'),
  true,
  () => <div style={{ height: 300 }} />,
);

const Pages = () => {
  return <NewsletterSignupV2 />
}

PoC: https://codesandbox.io/s/lazyload-lazyhydrating-nextjs-id9ro

https://twitter.com/ScriptedAlchemy/status/1450018915401158658

After discussion with Zack Jackson, this approach still has drawback, it gonna flashing when dynamic loading the chunk

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:.