New Suspense SSR Architecture in React 18

> By wrapping <Comments> into <Suspense>, we tell React that it doesn’t need to wait for comments to start streaming the HTML for the rest of the page. Instead, React will send the placeholder (a spinner) instead of the comments

> When the data for the comments is ready on the server, React will send additional HTML into the same stream, as well as a minimal inline <script> tag to put that HTML in the “right place”

> As a result, even before React itself loads on the client, the belated HTML for comments will “pop in”

This is so cool. Just gorgeous architectural design (if it works!).

Over the years we went from server-side rendered apps, which were fast. To highly-interactive bloaty client side apps, which were powerful but slow. The trend lately has been to move to client-side code-split bundles based on routing, or dynamic/static generated bundles which can be placed on CDNs and broadly distributed, but still require quite a bit of javascript and waterfall requests to load truly dynamic content on the page. All things told, these are earnestly a pretty good balance of speed and functionality.

However, they'll never be faster than a well designed SSR. This finally feels like we've reached the best of both worlds. I implore you to not have a knee-gut "why even do all this" reaction to the FE architecture patterns that have developed, including this one. They have developed for good reasons and just because they may seem convoluted to you does not mean they are not useful, powerful, and ultimately Good. If you don't get it, it's because writing frontend applications is a truly complex problem, much like designing a well architected backend is uniquely complex in its own ways. If you've worked on large frontend projects for over a decade, I think you'll understand how much better we have it today than we did 10 years ago, or even 5 years ago.

I'll repeat – this is so cool. Please give it the credit it deserves.