Suspense
Alright, so it's time to talk about one of the most advanced and bewildering APIs in React.
I'll be honest, for a long time, I didn't really know what Suspense was. And that's OK. The React team has long said that Suspense is a low-level feature, something built into libraries and meta-frameworks. Open-source maintainers need to learn the hard stuff, but not app developers like us.
And in fact, that's sorta how it's worked out. The new version of Next uses Suspense under-the-hood, to glorious effect. You don't need to understand Suspense at all to take advantage of it in Next!
All of that said, I like to understand how my tools work, at least at a conceptual level. And if we learn how Suspense works, it opens up some new doors for us. We can go beyond the built-in basic stuff, and do some more advanced things.
So, here's the plan:
- First, I'll show you the practical benefits of Suspense. We'll see how to use it in combination with Streaming SSR to achieve truly spectacular performance.
- Then, we'll see exactly how this performance is achieved, looking at the order of operations, the sequence of events.
- Finally, we'll learn exactly what Suspense is and how it works.