This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Why Server Side Rendering" Lesson
[00:00:00]
>> Brian Holt: Server side rendering. Let's go back to our page here.
>> Brian Holt: We look at server side rendering.
>> Brian Holt: So right now, when a user downloads our pet adoption application, they'd first download the HTML which loads the CSS, and it loads the JavaScript. The JavaScript loads on the page and then renders the React application for the first time.
[00:00:27] So if you look at my application here, I'm gonna just for a second come in here and turn off JavaScript,
>> Brian Holt: Which is on the right.
>> Brian Holt: Disable JavaScript.
>> Brian Holt: And I have to run the server again, npm run dev.
>> Brian Holt: So once it's done building here, and now, refresh the page.
[00:01:07] So if I disable JavaScript, which I'm not of the opinion these days that you need to have your application work without JavaScript. I think that's a dated solution, that used to be true, but now every browser reliably has JavaScript running in it. However, the problem with this is, this is what people see on your application if they have a slow connection until everything loads, right.
[00:01:33] We have to wait for React to download the application to be parsed then executed. And then for it to go through its first render and then render out to the dom. That can be quite long, if we're on 2G. I mean, so re-enable JavaScript here so you can see it's come back but let's look what happens if we do this.
[00:01:54] I'm gonna put this on regular 2G, that's gonna take a long time. That sucks, right, it sucks that our applications. I mean, how long are we into this? We're 15 to 20 seconds into this and a user still seeing not rendered. So hopefully, I'm establishing the problem here for you that this is too slow.
[00:02:17] This is too slow for any sort of user to come to my website and see not rendered for this long. This is a bad experience. How long did that take? That took 30 seconds,
>> Brian Holt: For our very small application. Again, this is not built for production, so it's not quite apples to apples.
[00:02:38] We could make this a bit faster. But even if you're on a fast connection, coming back here and just putting on no throttling.
>> Brian Holt: Most users, for the first time are gonna see not rendered up there, right, which is not a great experience either. You're gonna have like a flash of unrendered dom.
[00:03:00] So let's talk about server side rendering. If you're doing a Node application, this is actually quite easy to do. If you're doing something with rails or something else, you're gonna have a little bit more trouble. You're gonna have to have some sort of mid tier service of that request to your backend, does service side rendering and shows it to the user.
[00:03:18] I'm not gonna talk about that today, but just know that it's possible. That's how Netflix does it, for example. They have Java backends, they have a Node mid tier service that requests to the backend, does server side rendering, and serves the request.
>> Brian Holt: I'm gonna show you how to do it just using a Node server, so we're gonna write a really quick Node server.
[00:03:35] This is not a course on Node, so I'm not gonna be telling you too much about Node, Frontend Masters has upcoming great content about Node as well.