Размещение Suspense

Suspense раскрывает контент с гранулярностью своей границы — граница и есть единица «появляется вместе». Всё внутри одного <Suspense> трактуется как один атомарный кусок: React показывает fallback, пока не разрешится каждый приостанавливающийся потомок под ним, а затем раскрывает их все сразу. Значит, граница — это не просто «где находится спиннер»: она задаёт, какой срез UI живёт и умирает вместе.

// Всё под этой ОДНОЙ границей появляется вместе.
// Если <SlowFeed> занимает 1.2с, <FastHeader> и <FastSidebar>
// тоже спрятаны за fallback все 1.2с.
<Suspense fallback={<PageSkeleton />}>
  <FastHeader />
  <FastSidebar />
  <SlowFeed />
</Suspense>

Урок всего этого юнита вытекает из одной фразы: если хочешь, чтобы две части страницы раскрывались независимо, им нужны две границы.

Размещай границы рядом с местом, где нужны данные, а не только в корне маршрута. Инстинкт из старых паттернов — одно состояние загрузки на страницу. Suspense поощряет обратное: опускай границу ниже, чтобы статичная оболочка и уже разрешённые данные отрисовывались сразу, а каждая медленная область несла собственный fallback. Страница превращается в набор независимо подтекающих потоком дыр в мгновенно появляющейся раскладке.

// Оболочка + header + nav мгновенны. Каждая медленная область
// подтекает потоком в свой слот за собственным fallback.
export default function Dashboard() {
  return (
    <DashboardShell>
      <Header />            {/* отрисовывается сразу */}
      <Suspense fallback={<FeedSkeleton />}>
        <ActivityFeed />    {/* подтекает потоком, когда готов */}
      </Suspense>
      <Suspense fallback={<StatsSkeleton />}>
        <RevenueStats />    {/* подтекает потоком независимо */}
      </Suspense>
    </DashboardShell>
  );
}

Теперь медленный <RevenueStats> никогда не держит ленту в заложниках, и ни один из них не держит оболочку. Пользователь видит структуру за 80 мс и наблюдает, как контент наполняется, — куда лучше воспринимаемая производительность, чем один долгий пустой экран.

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

// ❌ всё или ничего: страница появляется со скоростью САМОГО МЕДЛЕННОГО потомка
<Suspense fallback={<FullPageSpinner />}>
  <Header /><Feed /><Stats /><Recommendations />
</Suspense>

// ✅ прогрессивно: каждая область появляется со скоростью СВОИХ СОБСТВЕННЫХ данных
<Header />
<Suspense fallback={<FeedSkeleton />}><Feed /></Suspense>
<Suspense fallback={<StatsSkeleton />}><Stats /></Suspense>
<Suspense fallback={<RecsSkeleton />}><Recommendations /></Suspense>

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

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

// Один медленный, низкоприоритетный виджет держит всю страницу в заложниках.
<Suspense fallback={<FullPageSpinner />}>
  <CriticalArticle />     {/* готов за 90мс... */}
  <RelatedPosts />        {/* ...но заблокирован на 1.4с этим */}
</Suspense>

Но обратное — тоже отказ: граница вокруг каждого листа порождает мерцающее месиво скелетов и прыгающую раскладку, которое читается как дёрганье, а не прогресс. Поэтому дисциплина в том, чтобы сопоставлять границы осмысленным независимым областям загрузки — оборачивать то, у чего реально разные тайминги, которые пользователю полезно видеть разрешающимися отдельно, и позволять тому, что грузится вместе, делить одну границу. Размещение границ — это вопрос суждения о том, какие куски должны появляться вместе.