Ленивая загрузка

Ленивая загрузка в Next.js помогает улучшить начальную производительность загрузки приложения, уменьшая количество JavaScript, необходимого для рендеринга маршрута.

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

Существует два способа реализации ленивой загрузки в Next.js:

1. Использование динамических импортов с next/dynamic
2. Использование React.lazy() с Suspense

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

next/dynamic

next/dynamic является составным элементом React.lazy() и Suspense. Он ведет себя одинаково в директориях app и pages, чтобы позволить постепенную миграцию.

Примеры

Используя next/dynamic, компонент заголовка не будет включён в начальный JavaScript-пакет страницы. Страница сначала отобразит Suspense fallback, а затем компонент Header, когда граница Suspense будет разрешена.

import dynamic from 'next/dynamic'
 
const DynamicHeader = dynamic(() => import('../components/header'), {
  loading: () => <p>Loading...</p>,
})
 
export default function Home() {
  return <DynamicHeader />
}

Важно знать: В import('path/to/component'), путь должен быть явно указан. Это не может быть строка шаблона или переменная. Кроме того, import() должен быть внутри вызова dynamic(), чтобы Next.js мог сопоставить пакеты webpack / идентификаторы модулей с конкретным вызовом dynamic() и предварительно загрузить их перед рендерингом. dynamic() не может использоваться внутри рендеринга React, так как он должен быть помечен на верхнем уровне модуля для работы предварительной загрузки, подобно React.lazy.

С именованными экспортами

Для динамического импорта именованного экспорта вы можете вернуть его из Promise, возвращаемого import():

export function Hello() {
  return <p>Hello!</p>
}
 
// pages/index.js
import dynamic from 'next/dynamic'
 
const DynamicComponent = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
)

Без SSR

Для динамической загрузки компонента на стороне клиента вы можете использовать опцию ssr для отключения рендеринга на сервере. Это полезно, если внешняя зависимость или компонент полагается на API браузера, такие как window.

import dynamic from 'next/dynamic'
 
const DynamicHeader = dynamic(() => import('../components/header'), {
  ssr: false,
})

С внешними библиотеками

В этом примере используется внешняя библиотека fuse.js для поиска по образцу. Модуль загружается только в браузере после того, как пользователь вводит текст в поле поиска.

import { useState } from 'react'
 
const names = ['Tim', 'Joe', 'Bel', 'Lee']
 
export default function Page() {
  const [results, setResults] = useState()
 
  return (
    <div>
      <input
        type="text"
        placeholder="Search"
        onChange={async (e) => {
          const { value } = e.currentTarget
          // Dynamically load fuse.js
          const Fuse = (await import('fuse.js')).default
          const fuse = new Fuse(names)
 
          setResults(fuse.search(value))
        }}
      />
      <pre>Results: {JSON.stringify(results, null, 2)}</pre>
    </div>
  )
}