const Reports = lazy(() => import("./Reports"));
<Suspense fallback={<Spinner />}>
<Reports />
</Suspense>lazy загружает код компонента по требованию отдельным файлом, а Suspense показывает заглушку, пока код или данные не готовы.
Что важно знать
- Ленивая загрузка по маршрутам и для тяжёлых редко используемых частей (редакторы, графики) уменьшает первый бандл.
- Suspense работает и с данными — в библиотеках, которые его поддерживают (TanStack Query, React Router, Next.js), и с хуком
useдля промисов. - Вложенные границы Suspense дают постепенное появление страницы вместо одного большого спиннера.
- При SSR Suspense позволяет отправлять HTML потоком: быстрые части приходят сразу, медленные — по готовности.