/layout.js @ 1722063761873
[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
- <suspense> in RSC causes the fallback to be immediately rendered, just like CSR. This is different than the previous example, where the entire page waited to be delivered until all Promises resolved.
- Notice that the delivery of the page is left open until the RSCs resolve. The page is still "loading" in your browser for a full 6 seconds because all the content has not yet been delivered.
- As Promises resolve on the server-side, updated content is delivered to the page and immediately shown
- Once all RSC Promises wrapped by <suspense> have resolved, the closing body and html tags are inserted and the document is considered complete.
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
Render Timestamp: 1722063764914
<suspense>
Loading inner component (3 seconds)...
</suspense>
Render Timestamp: 1722063764914
Render Timestamp: 1722063767918
Render Timestamp: 1722063767919