React SSR Deep(ish) look

Today, I looked into the React SSR sample code. (Kudos to Dan and team for the sophisticated user-land experience, btw).

What stroke my curiosity was the <!DOCTYPE html> token at the start of the server response HTML payload:

DOCTYPE token as seen from the HTML response payload

Why was I curious, you ask? Cuz at no point in the codebase do we explicitly write the DOCTYPE token into the response stream. To verify this, just search for the term DOCTYPE across the entire project directory.

So the curiosity triggered me to look into renderToPipeableStream, which in turn led to pushStartHtml, which answers my question.

Another question was “how could I still write to the response stream after I pipe the result of renderToPipeableStream to it”, like so:

writing “foo” and “bar” to the response stream in addition to piping to it

But I inspected the HTML response output, and it dawned on me: of course I can write whatever to the stream before it is closed. The pipe will still write more chunks to the stream after I manually write something to it. Therefore, even though res.write("bar") goes after stream.pipe(res), the word bar still comes before other data in the final HTML response output:

the word “bar” is not the last thing in the HTML response

The findings above pretty much satisfied my curiosity, for now.

During the journey, I was also drawn to startFlowing and createRequest, both of which look to be at the forefront of React Server-Side Rendering. Exploring these would be out of scope for my current quest, but I decided to jot them down anyways for future back reference.

That’s it for today’s blog.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s