Как выполнить динамический импорт с Next.js

Обычно невозможно импортировать модули по условию. Всякий раз, когда страница загружается, все импортированные модули на этой конкретной странице также загружаются.

const allowImport = true;
if (allowImport) {
  import DynamicComponent from "../components/hello";
}
export default function Home() {
  return (
    <div>
      <DynamicComponent />
    </div>
  )
}

Приведенный выше фрагмент кода вызовет некоторые ошибки при компиляции. Но с Next.js можно загружать модули в зависимости от условий с помощью динамического импорта. Мы должны импортировать модуль next / dynamic для выполнения динамического импорта.

import dynamic from 'next/dynamic'
const allowImport = true;
let DynamicComponent = null;
if (allowImport) {
  DynamicComponent = dynamic(() => import('../components/hello'))
}
export default function Home() {
  return (
    <div>
      <DynamicComponent />
    </div>
  )
}

Даже если импортированный модуль не является экспортным по умолчанию, мы могли бы выполнить динамический импорт.

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
)

function Home() {
  return (
    <div>
      <DynamicComponent />
    </div>
  )
}

export default Home

В Next.js HTML создается на стороне сервера. Таким образом, ситуации, например, когда конкретному модулю требуется библиотека, которая работает только в браузере, нарушат компиляцию кода. Благодаря динамическому импорту мы могли загружать этот конкретный модуль только на стороне браузера.

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello'),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <DynamicComponentWithNoSSR />
    </div>
  )
}

export default Home

Заключение

Динамический импорт также используется для увеличения производительности веб-сайта, поскольку мы можем остановить загрузку всех файлов при начальной загрузке страницы. Но если вы используете эту функцию неправильно, это также может повлиять на производительность сайта.