Next.js: Streaming и Suspense — ментальная модель

Question

Accepted Answer

Streaming шлёт **один HTTP-ответ чанками**: static shell сразу, каждый `<Suspense>` boundary — свой slice, когда его data resolve. `loading.tsx` — автоматический Suspense вокруг segment.

## Разбор

Классический SSR — all-or-nothing: server `await` все dependencies, потом один HTML. TTFB = slowest query — 800 ms на одном вызове блокирует всё.

Streaming: **render now + boundary + send later on same connection.**

```
  t=0ms   ┌─ shell (layout, nav, headings) ──────┐  flushed immediately
          │  }> ─┐ │  ← placeholder streamed now
  t=40ms  │  ▓ user sees shell + skeletons ▓    │ │
  t=350ms │  reviews resolve → swapped in ──────┘ │  ← out-of-order chunk
  t=800ms │  recommendations resolve → swapped in │  ← another chunk
          └───────────────────────────────────────┘
```

**Suspense boundary = promise, вокруг которого разрешено рендерить.** Fallback уходит мгновенно; resolved content — follow-up chunk того же response.

## Итог

Streaming + Suspense развязывают TTFB от slowest query: shell и быстрые секции не ждут медленные.