How does React 18 streaming SSR with renderToPipeableStream and Suspense improve TTFB, FCP, and TTI compared to the legacy renderToString approach?

Imagine you're building a LEGO castle. Old way: you must finish the whole castle before showing it to your friend. New way: you can show the base first, then add towers later. Streaming SSR lets the browser start showing parts of the page while the rest is still being built, making it feel faster.