The Evolution of React Suspense: From Obscurity to Necessity 🚀

React Suspense has had a fascinating journey. For years, it remained largely unused and was considered a mere fancy way to display loading states. However, with the release of React 18, Suspense has gained a new set of advantages that deserve a fresh look. 🔍

In this article, we’ll explore the three most common rendering architectures and the role React Suspense plays in each. Let’s dive in!

Quick Overview 📊

1. Client-side Rendering: Show fallback states during React.lazy loading; use Suspense-supported frameworks for declarative data loading and error states.
2. Server-side Rendering: All of the above + wrap server-rendered components in <Suspense /> for selective hydration on the client.
3. Server Components: All of the above + wrap async server components in <Suspense /> for streaming to the client in stages: first the fallback, then the final content.

Deep Dive 🏊‍♂️

1. Client-side Rendering

This is the most basic use of React. When a client requests a page, the server returns a file with minimal HTML, including <script> tags referencing JavaScript bundles. The page content is generated and populated into the empty HTML file…