Streaming in React: what actually happens
How React streams UI out of component-tree order using Suspense, markers and hydration scripts.
An interesting breakdown of how React’s UI streaming works under the hood, and why it can render an interface “out of order.”
The author shows that modern React SSR is no longer simply “assemble HTML → send it.” With Suspense and streaming, the server starts sending pieces of markup as they become ready. Their order can differ from the original component tree.
The key idea:
- React splits the tree into chunks
- each Suspense boundary becomes a point you can “wait for or skip”
- ready parts are sent to the client immediately, without blocking everything else
The result:
- fast TTFB
- the user sees something useful sooner
- heavy parts finish loading later
But there is some pretty clever magic under the hood:
React inserts special markers and scripts so it can later “assemble” everything back into the correct order in the browser and hydrate it.
The article explains well why this does not break the DOM and how out-of-order rendering is even possible without turning the page into a mess.
If you work with SSR / RSC, this is a must-read to understand what actually happens, rather than assuming “it somehow streams itself.”