React 18 Streaming: How renderToPipeableStream Works

Before React 18, server-side rendering used renderToString, which is synchronous: React renders the entire component tree to a string before sending any HTML to the browser. If any component loads data, the server must wait for all data before the first byte reaches the user.

React 18 introduced renderToPipeableStream, which renders the component tree as a stream of HTML chunks. Instead of waiting for everything to be ready, React sends HTML as it completes each part of the tree, allowing the browser to start rendering visible content immediately.