Границы Suspense и приоритет потоковой передачи

Границы Suspense — это базовая единица детализации потоковой передачи. Каждая граница Suspense в дереве компонентов создаёт секцию, которую можно передавать независимо: React может разрешать и передавать каждую границу в своём темпе, независимо от остальных.

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

Когда React передаёт оболочку, любая граница Suspense, данные для которой ещё недоступны, отображается с её резервным интерфейсом — обычно скелетоном загрузки или индикатором. Этот резервный интерфейс включается в исходный HTML-ответ, поэтому пользователь сразу видит индикатор загрузки, а не пустое место.

Когда данные границы Suspense становятся доступными, React передаёт HTML с результатом вместе с небольшим встроенным скриптом. Этот скрипт перемещает только что переданное содержимое из скрытого элемента шаблона в нужное место DOM, заменяя резервный интерфейс без полной перезагрузки страницы.

React использует шаблон с элементом template HTML: содержимое разрешённой границы Suspense передаётся в скрытый шаблон, после чего скрипт вызывает внутреннюю функцию React, чтобы переместить содержимое шаблона в нужное место DOM. Благодаря этому замена выполняется без манипуляций с DOM со стороны JS-фреймворка.

У вложенных границ Suspense независимые временные шкалы разрешения. Внутренняя граница Suspense может разрешиться раньше внешней — React передаёт внутреннее содержимое сразу после его готовности, независимо от того, разрешилась ли внешняя граница. Это обеспечивает максимальную параллельность загрузки данных.

Эффективное размещение Suspense предполагает, что медленные компоненты, зависящие от данных, находятся внутри границ Suspense, а быстрые, статические или доступные синхронно — снаружи. Панели навигации, главные секции со статическим текстом и нижние колонтитулы должны находиться снаружи. Списки товаров, панели пользователя и ленты комментариев — внутри.

React передаёт границы Suspense по мере их разрешения, а не обязательно в том порядке, в котором они расположены в документе. Секция ниже первого экрана может разрешиться раньше секции в верхней части экрана, если для неё требуется меньше данных. React корректно вставляет элементы в DOM независимо от порядка потоковой передачи.

Выборочная гидратация в React 18 реагирует на взаимодействие с пользователем: если пользователь щёлкает по границе Suspense, которая ещё не гидратирована, или наводит на неё указатель, React в первую очередь гидратирует эту границу. Благодаря этому взаимодействие с пользователем остаётся отзывчивым, даже когда другие части страницы ещё гидратируются.

Чем больше границ Suspense, тем гибче потоковая передача, но их избыток увеличивает накладные расходы из-за встроенных скриптов замены. Практическое правило: оборачивайте целые «разделы» — содержимое верхней части экрана, боковую панель или ленту ниже первого экрана, — а не отдельные компоненты. От одной до трёх границ Suspense на страницу — распространённый оптимальный вариант.

На вкладке «Сеть» в Chrome DevTools включите «Сохранять журнал» и наблюдайте за потоковой передачей ответа: HTML-документ увеличивается частями. На вкладке «Производительность» отображаются маркеры FCP и LCP — сравните сборки с потоковой и без потоковой передачи, чтобы оценить улучшение. Ограничьте скорость до быстрого 3G, чтобы усилить эффект.

Что происходит с резервным интерфейсом границы Suspense в исходном HTML-ответе потоковой передачи?

Границы Suspense разделяют дерево React на секции, которые можно передавать независимо. Оболочка, находящаяся вне Suspense, передаётся первой; для ожидающих границ сразу отображаются резервные интерфейсы; разрешённое содержимое заменяет их с помощью встроенных скриптов. У вложенных границ независимые временные шкалы. Размещайте границы на уровне секций для оптимальной детализации потоковой передачи, а порядок гидратации при взаимодействии пользователя оставьте системе приоритетов React.