5. Ленивая загрузка и оптимизация фронтенда

Модуль 18-lazy-loading демонстрирует несколько важных техник:

• динамический импорт компонентов (next/dynamic),
• разделение кода (code splitting) для клиентских компонент,
• ленивая загрузка сторонних библиотек (например, fuse.js),
• кастомные компоненты загрузки,
• lazy‑/priority‑загрузку изображений и prefetch ссылок.

5.1. Базовый паттерн next/dynamic

Функция dynamic из next/dynamic позволяет:

• отделить компонент в отдельный бандл,
• не включать его в initial bundle,
• по желанию отключить SSR (ssr: false),
• задать loading‑компонент.

Простой пример:

import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('./HeavyComponent'));

export default function Page() {
  return (
    <div>
      <h1>Lazy Loading</h1>
      <HeavyComponent />
    </div>
  );
}

Принципы:

• Используйте dynamic, когда компонент:
  • тяжёлый (большой JS‑бандл, много зависимостей),
  • используется не на всех страницах,
  • зависит от браузерных API и не должен рендериться на сервере.

5.2. Отключение SSR для клиентских‑только компонентов

В примере из вашего проекта:

• HeavyComponent импортируется с опцией ssr: false;
• это означает, что компонент не будет рендериться на сервере, а только на клиенте.

Паттерн:

import dynamic from 'next/dynamic';

const HeavyBrowserOnlyComponent = dynamic(
  () => import('./HeavyBrowserOnlyComponent'),
  {
    loading: () => <p>Загрузка...</p>,
    ssr: false, // отключаем SSR
  },
);

Когда так делать:

• Компонент использует window, document, localStorage, navigator и т.п.
• Компонент зависит от библиотек, не совместимых с SSR (e.g. некоторые визуализации, карты).

5.3. Lazy Loading для клиентских компонентов

Файл 01-client-components.tsx показывает:

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

Паттерн:

// 'use client' обязательно, т.к. компонент использует состояние
'use client';

import dynamic from 'next/dynamic';
import { useState } from 'react';

const ComponentA = dynamic(() => import('./components/A')); // отдельный бандл
const ComponentB = dynamic(() => import('./components/B')); // подгружается по условию
const ComponentC = dynamic(() => import('./components/C'), { ssr: false });

export default function ClientComponentExample() {
  const [showMore, setShowMore] = useState(false);

  return (
    <div>
      {/* Загружается сразу, но в отдельном клиентском бандле */}
      <ComponentA />

      {/* Загружается только когда showMore === true */}
      {showMore && <ComponentB />}
      <button onClick={() => setShowMore((prev) => !prev)}>Toggle</button>

      {/* Рендерится только на клиенте, без SSR */}
      <ComponentC />
    </div>
  );
}

Принципы:

• Чем реже компонент нужен пользователю, тем более оправдано его динамически загружать.
• Компоненты, которые отображаются «внизу страницы» или по клику, — хорошие кандидаты на lazy loading.

5.4. Ленивая загрузка сторонних библиотек (пример с fuse.js)

В 02-external-libraries.tsx ваш код делает следующее:

• есть массив names,
• при вводе в поле поиска:
  • динамически импортируется библиотека fuse.js,
  • создаётся инстанс Fuse,
  • производится поиск по строке,
  • результат кладётся в состояние.

Паттерн:

// 'use client'
import { useState } from 'react';

const names = ['Tim', 'Joe', 'Bel', 'Lee'];

export default function SearchWithFuse() {
  const [results, setResults] = useState<any[]>([]);

  const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = e.currentTarget;

    // Динамический импорт только при необходимости
    const Fuse = (await import('fuse.js')).default;

    const fuse = new Fuse(names);
    setResults(fuse.search(value));
  };

  return (
    <div>
      <input type="text" placeholder="Search" onChange={handleChange} />
      <pre>Results: {JSON.stringify(results, null, 2)}</pre>
    </div>
  );
}

Принципы:

• Не тяните тяжёлые библиотеки в initial bundle, если они используются редко.
• Вместо:

import Fuse from 'fuse.js'; // грузится сразу

делайте:

const Fuse = (await import('fuse.js')).default; // грузится только по событию

5.5. Кастомный компонент загрузки для dynamic

Файл 03-custom-loading.tsx демонстрирует:

• как передать кастомный loading‑компонент в dynamic,
• чтобы показывать скелетон/спиннер во время загрузки основного компонента.

Паттерн:

// 'use client'
import dynamic from 'next/dynamic';

const WithCustomLoading = dynamic(
  () => import('./components/WithCustomLoading'),
  {
    loading: () => <p>Loading...</p>, // показывается, пока идёт загрузка
  },
);

export default function Page() {
  return (
    <div>
      <WithCustomLoading />
    </div>
  );
}

Принципы:

• loading должен быть лёгким компонентом, без тяжёлой логики.
• Можно использовать skeleton‑компоненты, прогресс‑бары и т.п.

5.6. Динамический импорт именованных экспортов

Файл 04-named-exports.tsx показывает пример:

• как импортировать именованный экспорт через dynamic.

Паттерн:

import dynamic from 'next/dynamic';

// Предположим, что файл ../components/hello.ts экспортирует именованный компонент Hello
const ClientComponent = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello),
);

Принципы:

• Если модуль экспортирует несколько компонентов, dynamic должен указать, какой именно экспорт использовать.
• Используйте .then((mod) => mod.ИмяЭкспорта) в колбэке.

5.7. Оптимизация изображений: next/image

В компоненте HeavyComponent вы показываете:

• как использовать <Image> с ленивой загрузкой по умолчанию,
• как включить приоритетную загрузку для героев/баннеров (priority),
• как управлять prefetch’ем ссылок.

Пример:

import Image from 'next/image';
import Link from 'next/link';

export default function HeavyComponent() {
  return (
    <div>
      <Image
        src="/big-photo.jpg"
        alt="Example"
        width={600}
        height={400}
        loading="lazy" // по умолчанию в Next.js и так lazy
      />

      <Image
        src="/hero.jpg"
        alt="Main banner"
        width={1200}
        height={600}
        priority // отключает lazy, грузит сразу
      />

      <Link href="/about" prefetch={false}>
        О нас
      </Link>
    </div>
  );
}

Принципы:

• Используйте priority только для критически важных изображений (герой, главный баннер).
• Оставляйте остальные изображения с lazy‑загрузкой.
• У Link:
  • по умолчанию Next.js предзагружает (prefetch) страницу по наведению,
  • prefetch={false} отключает это поведение (например, если страница тяжелая).

5.8. Стратегия оптимизации фронтенда

Исходя из ваших примеров, можно сформулировать стратегию:

• 1. Определите тяжёлые компоненты и страницы:
  • графики, карты, редакторы, сложные формы;
  • страницы с большим количеством JS.
• 2. Вынесите их в dynamic:
  • используйте ssr: false для браузер‑только компонентов;
  • добавьте loading, чтобы UX был плавным.
• 3. Ленивая загрузка сторонних библиотек:
  • подключайте их динамически в обработчиках событий;
  • особенно для фич, которые используют только часть пользователей.
• 4. Оптимизируйте изображения:
  • используйте next/image везде, где можно;
  • правильно выставляйте width/height;
  • разумно расставляйте priority.
• 5. Контролируйте prefetch:
  • для часто посещаемых ссылок оставляйте prefetch по умолчанию;
  • для тяжёлых или редко используемых страниц отключайте prefetch.

Модуль 18-lazy-loading в вашем проекте — готовый практический справочник по этим приёмам. Этого раздела должно хватить, чтобы вспомнить и переиспользовать все основные паттерны ленивой загрузки и оптимизации фронтенда в Next.js.