Suspense и ленивая загрузка

const Reports = lazy(() => import("./Reports"));

<Suspense fallback={<Spinner />}>
  <Reports />
</Suspense>

lazy загружает код компонента по требованию отдельным файлом, а Suspense показывает заглушку, пока код или данные не готовы.

Что важно знать

• Ленивая загрузка по маршрутам и для тяжёлых редко используемых частей (редакторы, графики) уменьшает первый бандл.
• Suspense работает и с данными — в библиотеках, которые его поддерживают (TanStack Query, React Router, Next.js), и с хуком use для промисов.
• Вложенные границы Suspense дают постепенное появление страницы вместо одного большого спиннера.
• При SSR Suspense позволяет отправлять HTML потоком: быстрые части приходят сразу, медленные — по готовности.