Suspense on the server

React 18 introduces some improvements to server-side rendering (SSR) with Suspense that allow developers to create more efficient and scalable server-rendered applications.

Before React 18, Suspense was primarily used in client-side rendering to manage asynchronous data loading and code splitting. However, with React 18, Suspense can also be used on the server to optimize the rendering of server-rendered components.

Here’s a high-level overview of how Suspense works on the server:

• During the initial render of a server-rendered component, any Suspense boundaries are registered, and their fallback content is rendered instead of the main content.
• When data loading or code splitting is required, the server can return a “placeholder” HTML response that contains the fallback content for the Suspense boundaries.
• Once the asynchronous data or code has loaded, the client can hydrate the Suspense boundaries with the...