Як Suspense пов'язаний з рендерингом?

Next.jsMiddle~1 хв читання

Suspense - це механізм керування моментом рендеру, який дозволяє показувати UI поступово, а не чекати, поки завантажиться все. У Next.js він напряму пов'язаний зі streaming rendering і асинхронним серверним рендерингом.

Що таке `Suspense`

У Next.js Suspense:

визначає межу очікування
каже React:

"якщо цей шматок ще не готовий - покажи fallback"
дозволяє стрімити HTML
працює і на сервері, і на клієнті

Як Suspense впливає на рендеринг

Без `Suspense`

Header ──┐
Content ├─ чекаємо все
Sidebar ┘

→ користувач бачить сторінку тільки коли все готове

З `Suspense`

Header ──────────────▶ одразу
Sidebar ─────────────▶ одразу
Content ── fallback ─▶ потім

→ UI з'являється частинами

Базовий приклад

tsx

import { Suspense } from "react";

export default function Page() {
  return (
    <>
      <Header />

      <Suspense fallback={<Skeleton />}>
        <HeavyBlock />
      </Suspense>
    </>
  );
}

tsx

async function HeavyBlock() {
  const data = await fetchSlowData();
  return <Content data={data} />;
}

Header рендериться одразу
Skeleton - тимчасово
Content - коли дані готові

Зв'язок з типами рендерингу

Рендеринг	Роль Suspense
SSR	стримить HTML
ISR	прискорює перший екран
SSG	корисний при динамічних блоках
CSR	показує fallback до client fetch

Suspense не тип рендерингу, а інструмент керування ним.

`Suspense` і `loading.tsx`

loading.tsx - це:

автоматичний Suspense для сегмента

txt

app/tasks/[id]/
 ├─ loading.tsx   ← fallback
 └─ page.tsx

Еквівалентно:

tsx

<Suspense fallback={<Loading />}>
  <Page />
</Suspense>

Важливі нюанси

Працює краще з Server Components

дані завантажуються на сервері
HTML стримиться
менше JS

Client Components

Suspense чекає JS + fetch
fallback важливий для UX

Не ловить помилки

Для помилок потрібен:

error.tsx
ErrorBoundary

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.