Effortless Hydration and Efficient Code Splitting in NextJS Application

Question

Effortless Hydration and Efficient Code Splitting in NextJS Application

I understand Lazy Hydration and Code Splitting, but how can I ensure that the split chunk is only downloaded when the component is being hydrated?

This is what my code currently looks like

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, meaning it will only hydrate once the user scrolls. However, the JavaScript chunk for MyComponent is downloaded immediately as the page loads.

I found a workaround by using dynamic import only on the client side, but this causes the component to momentarily disappear upon hydration. This leads to increased Cumulative Layout Shift (CLS) which is not acceptable. Here's the code for this workaround

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

Please note that I want to render the component's HTML during server-side rendering. This is why I don't want to lazy load it. I aim to lazy hydrate so that the component's HTML is displayed initially but its JS is only downloaded and executed when visible.

reactjs webpack next.js

Answer 1

Answer №1

Revision:

Within the document:

// Disables preloading of code-split chunks
class LazyHead extends Head {
  getDynamicChunks(files) {
    const dynamicScripts = super.getDynamicChunks(files);
    try {
      // Retrieve 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 original dynamic scripts
      return dynamicScripts;
    }
  }
}

const backupScript = NextScript.getInlineScriptSource;
NextScript.getInlineScriptSource = (props) => {
  // Do not allow next to load all dynamic IDS, let webpack handle it
  if (props?.__NEXT_DATA__?.dynamicIds) {
    const filteredDynamicModuleIds = props?.__NEXT_DATA__?.dynamicIds?.filter(
      (moduleID) => !moduleID?.startsWith('lazy'),
    );
    if (filteredDynamicModuleIds) {
      // Modify dynamicIds in next data
      props.__NEXT_DATA__.dynamicIds = filteredDynamicModuleIds;
    }
  }
  return backupScript(props);
};

In next configuration

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

Revision:

Within the document:

// Disables preloading of code-split chunks
class LazyHead extends Head {
  getDynamicChunks(files) {
    const dynamicScripts = super.getDynamicChunks(files);
    try {
      // Retrieve 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 original dynamic scripts
      return dynamicScripts;
    }
  }
}

const backupScript = NextScript.getInlineScriptSource;
NextScript.getInlineScriptSource = (props) => {
  // Do not allow next to load all dynamic IDS, let webpack handle it
  if (props?.__NEXT_DATA__?.dynamicIds) {
    const filteredDynamicModuleIds = props?.__NEXT_DATA__?.dynamicIds?.filter(
      (moduleID) => !moduleID?.startsWith('lazy'),
    );
    if (filteredDynamicModuleIds) {
      // Modify dynamicIds in next data
      props.__NEXT_DATA__.dynamicIds = filteredDynamicModuleIds;
    }
  }
  return backupScript(props);
};

In next configuration

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 3

Answer №2

Unsure if this is what you're looking for, I've implemented a technique that combines lazy hydration with a webpack plugin and custom next head in order to preserve the HTML while removing below-the-fold dynamic imported scripts. This way, I only download the necessary JavaScript and hydrate the component right before it becomes visible to the user as they scroll. It doesn't matter if the component was used during the initial render - I don't need the runtime unless it's going to be seen.

This method is currently being used in production and has cut down the initial page load time by 50% without any negative impact on SEO.

If you're interested in how to implement this, feel free to contact me on Twitter @scriptedAlchemy. While I haven't written a post about it yet, I can assure you that achieving a "download as you scroll" design is quite achievable with minimal effort.

Answer 4

Unsure if this is what you're looking for, I've implemented a technique that combines lazy hydration with a webpack plugin and custom next head in order to preserve the HTML while removing below-the-fold dynamic imported scripts. This way, I only download the necessary JavaScript and hydrate the component right before it becomes visible to the user as they scroll. It doesn't matter if the component was used during the initial render - I don't need the runtime unless it's going to be seen.

This method is currently being used in production and has cut down the initial page load time by 50% without any negative impact on SEO.

If you're interested in how to implement this, feel free to contact me on Twitter @scriptedAlchemy. While I haven't written a post about it yet, I can assure you that achieving a "download as you scroll" design is quite achievable with minimal effort.

Answer 5

Answer №3

import { useState } from "react";
import dynamic from "next/dynamic";
const MyComponent = dynamic(() => import("components/my-component"));

export const PageComponent = () => {
  const [downloadComp, setDownloadComp] = useState(false);

  return (
    <>
      <div className="some-class-name">
        <button onClick={() => setDownloadComp(true)}>
          Download the component
        </button>
        {downloadComp && <MyComponent />}
      </div>
    </>
  );
};

The provided code snippet enables downloading the component upon clicking a button. If you prefer the download to occur when scrolling to a specific position, consider using react-intersection-observer to trigger setDownloadComp. While I have not personally utilized react-lazy-hydration, my experience involves employing react-intersection-observer and nextjs dynamic imports for lazily loading components based on user scroll behavior.

Answer 6

import { useState } from "react";
import dynamic from "next/dynamic";
const MyComponent = dynamic(() => import("components/my-component"));

export const PageComponent = () => {
  const [downloadComp, setDownloadComp] = useState(false);

  return (
    <>
      <div className="some-class-name">
        <button onClick={() => setDownloadComp(true)}>
          Download the component
        </button>
        {downloadComp && <MyComponent />}
      </div>
    </>
  );
};

The provided code snippet enables downloading the component upon clicking a button. If you prefer the download to occur when scrolling to a specific position, consider using react-intersection-observer to trigger setDownloadComp. While I have not personally utilized react-lazy-hydration, my experience involves employing react-intersection-observer and nextjs dynamic imports for lazily loading components based on user scroll behavior.

Answer 7

Answer №4

If you're looking to simplify a certain task, I've developed a library that can help. Here are some benefits you can enjoy:

Complete HTML page rendering (great for SEO)
Loading JS and Hydrate only when necessary (ideal for PageSpeed)

Wondering how to make use of it?

import lazyHydrate from 'next-lazy-hydrate';

// Utilize lazy hydration on scroll into view
const WhyUs = lazyHydrate(() => import('../components/whyus'));

// Use lazy hydration when users hover into the view
const Footer = lazyHydrate(
  () => import('../components/footer', { on: ['hover'] })
);

const HomePage = () => {
  return (
    <div>
      <AboveTheFoldComponent />
      {/* ----The Fold---- */}
      <WhyUs />
      <Footer />
    </div>
  );
};

Find out more here: https://github.com/thanhlmm/next-lazy-hydrate

Answer 8

If you're looking to simplify a certain task, I've developed a library that can help. Here are some benefits you can enjoy:

Complete HTML page rendering (great for SEO)
Loading JS and Hydrate only when necessary (ideal for PageSpeed)

Wondering how to make use of it?

import lazyHydrate from 'next-lazy-hydrate';

// Utilize lazy hydration on scroll into view
const WhyUs = lazyHydrate(() => import('../components/whyus'));

// Use lazy hydration when users hover into the view
const Footer = lazyHydrate(
  () => import('../components/footer', { on: ['hover'] })
);

const HomePage = () => {
  return (
    <div>
      <AboveTheFoldComponent />
      {/* ----The Fold---- */}
      <WhyUs />
      <Footer />
    </div>
  );
};

Find out more here: https://github.com/thanhlmm/next-lazy-hydrate

Effortless Hydration and Efficient Code Splitting in NextJS Application

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for bypassing arrow functions when sending prop values to another component?

Is d3 Version pretending to be a superior version?

When refreshing, Next.js and Styled Components may lose synchronization between the server and the client

Can Enzyme snapshots be utilized with React fragments?

Refresh Next.js on Navigation

Encountering issues with dependencies while updating React results in deployment failure for the React app

The type 'TaskListProps[]' cannot be assigned to type 'TaskListProps'

Steps to transform current react application into an npm module

Struggling to transfer sass variables between scss files

Stop using Flexbox in Material UI on small screens

Refresh the Data Displayed Based on the Information Received from the API

Shifting the Dropdown Indicator in react-select: A Step-by-Step Guide

Displaying input fields in editable cells of a react-table should only happen upon clicking the cell

Launching a React build using Docker on Apache or AWS

React Native state remains unchanged

Prevent dialog from shifting when mobile keyboard appears in React using Material-ui

What is the method to customize the color of the Stepper component in React Material UI?

Having trouble sending a picture to AWS S3 from a NextJS app when running on the server

Sorting feature in Antd table does not function properly when using render method

Implementing a feature in React/NextJS to selectively load an external script for users who are not authenticated