Next.js : Dynamic Import (Lazy Loading)

Lazy loading in Next.js is a feature that allows you to defer the loading of components and libraries until they are needed. This can improve the initial loading performance of your application by decreasing the amount of JavaScript that needs to be loaded.

 

There are two ways you can implement lazy loading in Next.js:

• Using Dynamic Imports with next/dynamic
• Using React.lazy() with Suspense

Dynamic Imports with next/dynamic

The next/dynamic module allows you to import a component dynamically. This means that the component will not be loaded until it is actually needed.

 

To use next/dynamic, you need to wrap the component that you want to lazy load in a Dynamic component. For example, the following code would lazy load the MyComponent component:

import React, { useState } from 'react';
import { Dynamic } from 'next/dynamic';

const MyComponent = () => {
  const [isLoaded, setIsLoaded] = useState(false);

  if (!isLoaded) {
    const component = await Dynamic({
      loader: () => import('./MyComponent'),
    });
    setIsLoaded(true);
  }

  return <component />;
};

export default MyComponent;

The React.lazy() function allows you to lazy load a component using the Suspense component. This means that the component will not be loaded until it is actually needed, and the user will see a loading spinner while the component is loading.

 

To use React.lazy(), you need to wrap the component that you want to lazy load in a Suspense component. For example, the following code would lazy load the MyComponent component:

import React, { useState } from 'react';
import { Suspense } from 'react';
import MyComponent from './MyComponent';

const MyComponent = () => {
  const [isLoaded, setIsLoaded] = useState(false);

  if (!isLoaded) {
    return <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>;
  }

  return <MyComponent />;
};

export default MyComponent;

Which method you use to implement lazy loading in Next.js depends on your specific needs. If you need to lazy load a component that is not used on every page, then you can use Dynamic Imports. If you need to lazy load a component that is used on every page, then you can use React.lazy() with Suspense.

 

Here are some of the benefits of using lazy loading in Next.js:

• Improved initial loading performance: Lazy loading can improve the initial loading performance of your application by decreasing the amount of JavaScript that needs to be loaded.
• Reduced bandwidth usage: Lazy loading can reduce bandwidth usage by only loading the components that are actually needed.
• Better user experience: Lazy loading can provide a better user experience by preventing users from having to wait for all of the components to load before they can interact with the application.

 

https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading

Optimizing: Lazy Loading | Next.js