Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як Suspense пов'язаний з рендерингом?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)`Suspense` - це **механізм керування моментом рендеру**, який дозволяє **показувати UI поступово**, а не чекати, поки завантажиться все. У Next.js він напряму пов'язаний зі **streaming rendering** і **асинхронним серверним рендерингом**. **Ключове:** `Suspense` **не тип рендерингу**, а **інструмент керування ним**.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`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`Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.