The problem
A page that waits for every query before sending anything feels slow. Streaming lets the server send ready parts of the HTML first and fill in slow parts later.
Suspense boundaries
Suspense wraps a part of the tree that may not be ready. While its data loads, React shows a fallback like a skeleton. When the data resolves, the real content replaces the fallback.
- Wrap slow sections so fast content is not blocked.
- A component suspends by reading a promise that has not resolved.
- The fallback should match the final layout to avoid a jump.
Benefits
Streaming improves perceived performance. The shell arrives quickly so users see structure, and each Suspense boundary resolves independently, so one slow widget cannot freeze the whole page.
Trade offs
Too many tiny boundaries cause layout flicker. Group related loading states so the experience feels coherent rather than piecemeal.
Key idea
Suspense plus streaming sends a fast shell with fallbacks, then progressively swaps in real content as each section resolves.