Lazy Hydrate + Code Splitting on NextJS app

Question

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?

My code looks like this

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 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 MyComponent will be downloaded right away when the page loads.

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

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

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.

Answer 1

Update:

In document:

// stops preloading of code-split chunks
class LazyHead extends Head {
  getDynamicChunks(files) {
    const dynamicScripts = super.getDynamicChunks(files);
    try {
      // get chunk manifest from loadable
      const loadableManifest = __non_webpack_require__(
        '../../react-loadable-manifest.json',
      );
      // search and filter modules based on marker ID
      const chunksToExclude = Object.values(loadableManifest).filter(
        manifestModule => manifestModule?.id?.startsWith?.('lazy') || false,
      );
      const excludeMap = chunksToExclude?.reduce?.((acc, chunks) => {
        if (chunks.files) {
          acc.push(...chunks.files);
        }
        return acc;
      }, []);
      const filteredChunks = dynamicScripts?.filter?.(
        script => !excludeMap?.includes(script?.key),
      );

      return filteredChunks;
    } catch (e) {
      // if it fails, return the dynamic scripts that were originally sent in
      return dynamicScripts;
    }
  }
}

const backupScript = NextScript.getInlineScriptSource;
NextScript.getInlineScriptSource = (props) => {
  // dont let next load all dynamic IDS, let webpack manage it
  if (props?.__NEXT_DATA__?.dynamicIds) {
    const filteredDynamicModuleIds = props?.__NEXT_DATA__?.dynamicIds?.filter?.(
      moduleID => !moduleID?.startsWith?.('lazy'),
    );
    if (filteredDynamicModuleIds) {
      // mutate dynamicIds from next data
      props.__NEXT_DATA__.dynamicIds = filteredDynamicModuleIds;
    }
  }
  return backupScript(props);
};

in next config

const mapModuleIds = fn => (compiler) => {
  const { context } = compiler.options;

  compiler.hooks.compilation.tap('ChangeModuleIdsPlugin', (compilation) => {
    compilation.hooks.beforeModuleIds.tap('ChangeModuleIdsPlugin', (modules) => {
      const { chunkGraph } = compilation;
      for (const module of modules) {
        if (module.libIdent) {
          const origId = module.libIdent({ context });
          // eslint-disable-next-line
          if (!origId) continue;
          const namedModuleId = fn(origId, module);
          if (namedModuleId) {
              chunkGraph.setModuleId(module, namedModuleId);
          }
        }
      }
    });
  });
};

const withNamedLazyChunks = (nextConfig = {}) => Object.assign({}, nextConfig, {
  webpack: (config, options) => {
    config.plugins.push(
      mapModuleIds((id, module) => {
        if (
          id.includes('/global-brand-statement.js')
          || id.includes('signposting/signposting.js')
          || id.includes('reviews-container/index.js')
          || id.includes('why-we-made-this/why-we-made-this.js')
        ) {
          return `lazy-${module.debugId}`;
        }
        return false;
      }),
    );

    if (typeof nextConfig.webpack === 'function') {
      return nextConfig.webpack(config, options);
    }

    return config;
  },
});

In file, using next/dynamic

    <LazyHydrate whenVisible style={null} className="col-xs-12">
      <GlobalBrandStatement data={globalBrandData} />
    </LazyHydrate>

Answer 2

Not sure if this is what you’re after, but I use lazy hydration mixed with webpack plugin and custom next head to preserve the html but strip out below the fold dynamic imported scripts. So I only download the JS and hydrate the component just before the user scrolls into view. Regardless of it the component was used during render - I don’t need the runtime unless a user is going to see it.

Currently in production and has reduced initial page load by 50%. No impact to SEO

Get me on twitter @scriptedAlchemy if you need the implementation, I’ve not yet written a post about it - but I can tell you it’s totally possible to achieve this “download as you scroll” design with very little effort.