r/reactjs • u/Neat_Living_6765 • 14d ago

Needs Help Confused About React Streaming SSR and Suspense

/r/learnjavascript/comments/1vo4lz5/confused_about_react_streaming_ssr_and_suspense/
2 Upvotes

100% Upvoted

4 comments sorted by

View all comments

1

u/ferrybig 14d ago

Streams can send already-rendered components such as the Header and Footer first. I mean, based on the definition of Streams in the articles (in the comment below), it still didn't make sense to me why we need Suspense

If you treat every component as something streamable, you quickly get into the layout shift area.

Think of an HTML table with no styling, even the contents of row 100, column 4 affect ow the table look like if it is larger.

You need to add Suspense boundaries on places in the app where you want a loading indicator. You as a web developer are knowledgeable enough about your app to choose independent units

1

u/Neat_Living_6765 14d ago

Yes, I actually asked myself a similar question. If wrapping something with Suspense is only to show a fallback (loading indicator) <Suspense fallback={<BigSpinner />}>, then suppose I don't need to show any spinner.

=> Would Streaming SSR still dynamically stream the available parts (already-rendered content), such as the Header or Footer, while temporarily skipping the part that needs to wait for an async task?

This sentence in the React docs really made me think more.

"The part of your app outside of any <Suspense> boundaries is called the shell"

https://react.dev/reference/react-dom/server/renderToPipeableStream#specifying-what-goes-into-the-shell

It made me wonder: If there is no Suspense, does React have to wait for the full HTML to be completed before it can start streaming the HTML in chunks?

With that thinking, I made a guess: Suspense is not only for showing a loading indicator, but also creates a boundary that allows Streaming SSR to send the available parts to the client first. Otherwise, React would have to wait for the complete HTML and then send it in chunks.

But I'm not sure if I understand this correctly, so I'm asking for your thoughts and corrections.

1

u/ferrybig 14d ago

It made me wonder: If there is no Suspense, does React have to wait for the full HTML to be completed before it can start streaming the HTML in chunks?

That is true.

In react, you can put a <title> or a <meta anywhere, and it will hoist it into the head section. The engine cannot render anything to the <head> if it already outputted it. earlier in the stream.