This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Streaming Markup" Lesson
[00:00:00]
>> So lets actually make this one step more interesting, and we'll see how you like this. Right now we're sending it as one really big response. We can actually make this more interesting and we can do what's called a streaming response. So let's actually open back up our index.html here or sorry, index.js.
[00:00:22] We're gonna change this just a tiny bit. So change render to string to render to node stream. And what this is going to do is, node has a thing called a stream. You don't really need to care too much about it unless you're a node coder. But it's kind of like a continuous data source, right?
[00:00:45] So it's something that's going to have multiple responses. So what this is gonna to do is it's going to render your react application out in pieces, right? So it's gonna do this piece, then this piece, then this piece in this piece. And what's cool about doing it this way, is that you can send your users incremental responses, they can start rendering things immediately.
[00:01:05] So let's take a look at what that would look like. The first thing you wanna do here is we already have the first piece pre rendered because it's coming from our index.html, right? So what I'm gonna do is I'm gonna say res.write parts 0. Now what's really cool about doing it this way, is immediately the user is going to get their CSS and everything else in the head tag.
[00:01:34] So we're gonna start downloading stuff immediately. So they're gonna get CSS probably before they get your JavaScript app. Which means that they're not gonna have any sort of like flash or anything like that. It kind of like parallelizes some of your workload. So you write this immediately. This starts happening.
[00:01:50] This can be, intensive for server side render something. And then we're gonna say here const stream equals, render to node stream. Reactmarkup, and now we have a stream and what I can do is I can say, stream.pipe To some basic connecting one stream into my response. And then I have to tell it I'm not done yet, so end false.
[00:02:25] So now this stream is hooked up to my response and so it's streaming my response to the user. And then once this is done, once this stream has finished, like once my react app is totally fully rendered, I can say stream. .on end so that end event to just give it a call back to say.
[00:02:51] All right one set done write the status of, status context static sorry static context. Or 200 just what we were doing before so I guess they could have moved this just literally that up here. rez.write parts one write so we have to write the last part of the HTML now.
[00:03:22] And then res.end. And we can delete all this stuff down here. So now that we've just made that much better for our users that they're gonna get pieces of the response as fast as possible. So let's make sure that that works. We're gonna stop and start our server again.
[00:03:47] This thing on port 3000. You won't notice any difference, Because this is all happening so quickly. But you can be assured that they're getting multiple pieces being streamed to them. Which is pretty cool. That is server side rendering. That's basically all of it in a nutshell. So just as a kind of a way of suggestion.
[00:04:07] When I worked at reddit, we didn't have any node servers that I could write to. So I couldn't do server side rendering. But I thought Netflix had a really and LinkedIn for that matter had really interesting ways of solving this. They had a node server that made all of the requests to the backends for the user.
[00:04:23] And then they use all of those responses from the back ends as a mid tier service to do server side rendering and serve that to the user. So they basically stood up a node server In front of all their back end services. And then they did server side rendering with that kind of mid-tier service.
[00:04:39] So if that works for you, and that's something you wanna do at your company, that works really well for Netflix and LinkedIn.