Next.js: Streaming и Suspense — типичные gotcha на собеседовании

Question

Accepted Answer

Streaming не спасает от waterfall внутри одного component; redirect после flush; metadata и skeleton CLS — типичные ловушки.

## Разбор

- **`redirect()` / `notFound()` after first flush.** После stream start — не 3xx, а client redirect. Auth/redirect *above* Suspense boundaries, до slow await.
- **Sequential awaits — waterfall streaming не чинит.** `await a; await b` в одном component serial. Streaming parallelises *across* boundaries, не *within* function — `Promise.all` или separate async components.
- **`loading.tsx` wraps segment AND children** — показывается при navigation во весь subtree; surprise когда slow deep child.
- **Metadata blocks stream.** Slow `generateMetadata` delays shell — `<head>` first; держите cheap (shared fetch с page via memoization).
- **Skeletons mismatch → CLS** — streamed content shifts below. Size fallbacks под real content.
- **Nested Suspense reveals top-down** — outer boundary не reveal пока не ready, даже если inner resolved.

## Итог

Streaming требует parallel fetch, правильных boundaries и skeletons; redirect/auth — до Suspense, не после.