Как работают Suspense и React.lazy для разделения кода?

Question

Accepted Answer

**`React.lazy`** загружает bundle JavaScript компонента **по требованию** (только при первом рендеринге). **`Suspense`** показывает резервный интерфейс, пока дочерний компонент с отложенной загрузкой (или ожидающий данные) все еще загружается. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Почему это важно Без разделения кода браузер загружает **весь** код приложения (включая тяжелую библиотеку графиков) перед тем, как что-либо отобразить. С `lazy` код `Chart` разбивается на отдельный файл и загружается только тогда, когда пользователь до него доходит — это улучшает начальное время загрузки и метрики Core Web Vitals. ## Как Suspense это координирует Когда `Chart` приостанавливается (его bundle еще не готов), React "останавливает" эту часть дерева и вместо этого отображает ближайший fallback `Suspense`, затем заменяет его на реальный компонент после загрузки. Одна граница может охватывать несколько отложенных компонентов и показывать один fallback: ```jsx }>

``` ## Помимо разделения кода Suspense также координирует **загрузку данных** с фреймворками/библиотеками, которые "приостанавливаются" при ожидающем запросе, и работает с **потоковым SSR** (Next.js App Router) для отправки быстрой оболочки и потокового наполнения более медленных частей. Размещайте границы продуманно, чтобы избежать больших раздражающих сдвигов макета, когда содержимое появляется.