Intermediate React, v2 Server Side Rendering to Node Stream

[00:00:00]
>> Brian Holt: There's one more thing that I wanna show you about server side rendering. This is the first commit in the SSR branch. So if you come into,
>> Brian Holt: Our repo here, and there's an SSR branch, SSR.
>> Brian Holt: You can see that there are two commits in here for SSR.

[00:00:22] One of them uses render to string and then I'm gonna show you a second one called render to node string. So this is a really new API that I'm pretty excited about. So go back to your index.js, index.js. Go up to your renderToString and we'll say renderToNodeStream instead.

[00:00:47]
>> Brian Holt: So there's kind of a new idea in for,
>> Brian Holt: Client-side frameworks of doing server-side rendering, where instead of doing just one big payload, right, that's what we're doing right now. We're just sending all the payload all at once, right? That you just start rendering pieces of it at a time, right?

[00:01:09] So that you immediately send them a piece and then you wait to render a little bit more, and so you render a little bit more. And then you render a little bit more, and then you finish, right? And so it's kind of this progressive loading. This is great because now we can immediately send them the first part that we already have, right?

[00:01:25] And they can start loading all the CSS while we're finishing server side rendering, right? Our app is not very big, so this is not gonna make that big of a difference. But if you have a LinkedIn sized application that's gonna be a massive win for you. You can literally shave 100 to 400 milliseconds off just like that.

[00:01:43] So we're gonna modify this a little bit here. So the very, very first thing that we're gonna do here is we're gonna say res.write(parts

[0]). So we're immediately gonna flush the users. Here is all these CSS and go download this, and I'm gonna hurry in the background render my JavaScript, right?

[00:02:05] So we do this first. Then we're gonna make a stream, it says const stream =renderToNodeStream(reactMarkup). And this is gonna progressively render your app, right? One piece at a time, it's just gonna flush pieces of those out to what's called a node stream, which is a specific kind of node data structure that progressively gives you data over time, right?

[00:02:32] And then here I'm gonna say stream.pipe(res end: false)).
>> Brian Holt: And then here you're gonna say stream.on('end'.
>> Brian Holt: It's gonna say res.write(parts[1]) and res.end, okay? And then we can just drop all this stuff here at the end, oops. 35 and 34 you can just delete.
>> Brian Holt: So this res.pipe here or the stream.pipe saying like pipe all this stuff into, connect this pipe to this pipe.

[00:03:22] Send all the markup into the res, the response to the user, but don't end it once it's done. That's what that part means. Then here it says, once you're finished write the other bit of the HTML and then cut the connection. We're finished, right? Now again, we're not gonna notice any difference cuz we're on the localhost, right?

[00:03:44] So if I do npm run start,
>> Brian Holt: This is still gonna work relatively the same way.
>> Brian Holt: Possibly.
>> Brian Holt: So what am I getting back?
>> Brian Holt: Well, this works okay, right?
>> Brian Holt: Yeah, okay, seems like it's working okay.
>> Brian Holt: So there's a second commit here, in this particular repo.

[00:04:36] They'll have the renderToNodeStream working as well.
>> Brian Holt: Any questions about that?
>> Brian Holt: So this is preferable if you have the ability to do streams and handle things like HTTP2 or long running HTML requests or HTTP requests. This is preferable. This will be faster for you, almost always. I can't imagine when the in world wouldn't be, but famous last words.

[00:05:04] But yeah, that's server-side rendering. So I'm gonna reset my repo now. I'm going to say git reset HEAD --hard, and then git clean -f.
>> Brian Holt: That was a lot of stuff, all right, cool.