/layout.js @ 1709038916945 [Home]

Streaming with Server-Side Suspense

It may take several reloads of this page to see what is happening!

This box has two nested RSCs that each delay for 3 seconds, creating a waterfall. One <suspense> wraps them both, so it takes 6 seconds for all to resolve, and then they both appear.

<suspense>
Loading both components (6 seconds)...
</suspense>
This is the same structure, but a <suspense> wraps both the outer and inner boxes. As soon as the outer suspense resolves, it renders itself and then the inner suspense takes over while the inner component waits.
<suspense>
Loading outer component (3 seconds)...
</suspense>

Key Points

Streaming Content

The content below is what is streamed in from the server while the page continues to load. If you reload and scroll down to here, you will see it pop in as it is delivered.

TODO

Much more to explain here...

Dynamically Updating Server-Rendered Content