Intermediate React, v4 Server Side Rendering Overview

Transcript from the "Server Side Rendering Overview" Lesson

[00:00:00]
>> We're moving on to server side rendering. So this is the only point we're gonna be writing a little bit of Node.js, specifically we're gonna be writing a server side component to this. It'd be helpful if you knew a little bit of Node.js, not required. Node.js will not be the emphasis of what's going on here.

[00:00:21] If you need Node.js, I like brushing up on that. Frontend Masters has a plentiful library of great Node content. Again, I really liked Scott Moss's courses. I just like Scott, he's a good guy. Except if he beats me at Apex Legends, then he's a jerk. Okay, so we're done with the code splitting part of this, we're gonna restart our application.

[00:00:47] So go ahead and do that again. Basically, we're gonna cp- R this, so I'm just gonna cp -R this 12-portals-and-refs, and I'm gonna make another copy of it. And this one we'll just call ssr or something like that. So go into your project, you're gonna run npm install.

[00:01:13] It'll take a second. People like to ask me where do I get this thing for my prompt. This is called Spaceship, so if you just Google Spaceship prompt, it'll tell you how to set that up. Okay, so I'm gonna open this in my code editor. And now you can see again, none of my code splitting stuff is in here, or moment, then thank God.

[00:01:52] Okay, so let's talk about what server side rendering is, why you'd wanna do it, all those kind of things. So performance in general is kind of a front and center sort of concern for us as frontend developers. In particular, I'm gonna say more so than other disciplines of engineering, and I've been across the entire stack.

[00:02:18] I've been in all the way from DevOps and SRE, all the way to being basically a design engineer. And now I'm a PM, so I've been all over that stack, right? Frontend engineering has a peculiar kind of performance engineering. Well, we're doing a ton with human psychology, right?

[00:02:37] There's actual performance, which is like how fast can your Kubernetes cluster munge and spit back out those requests, right? That's one kind of performance. But there's another kind of performance, of how fast can a human comprehend what you're trying to communicate to them. One of the ways that we can do that is server side render.

[00:02:54] We can basically render out our React app preemptively and send that to the user, so that immediately they see something. And there's a lot of research that's gone into that the human will see something, comprehend it, make a decision what they wanna do, and then they'll go to click on it.

[00:03:10] And in general, we can be fast enough as frontend engineers to show them something, then they're gonna make a decision. And by the time they get to clicking on it, we can catch up and make our app interactive, right? A big part of that is server side rendering.

[00:03:26] Now this is helpful for a couple of reasons. One is just because I have a brand new iPhone, right? And so my iPhone is pretty fast at rendering out webpages, right? But if you're on a legacy Android device, or even just old iPhones, right? That process can be really slow on a low end 2G device.

[00:03:46] I kind of alluded to the other thing that's important. We talked about code splitting, which is able to split your packages across the wire there, so that you can load things kind of more progressively. But with server side rendering, we're able to sometimes load things in smaller packets upfront so people can see things sooner.

[00:04:03] Then we load the big JavaScript payload and then things happen, right? By making that critical path of time to first meaningful render as short as possible, then we can get perceived higher performance. Cuz web performance is great, but the thing that actually matters is what the hell does a user think, right?

[00:04:25] We can have the time to first paint be zero, but if your first paint is loading, who cares, right? It doesn't matter unless your user is actually getting meaningful things in front of them. I used to give a performance talk. And one of the things that I made people do in the middle of this talk is I loaded linkedin.com.

[00:04:50] At the time I worked at LinkedIn, so I was kind of self-shaming. And I made them watch it on a 2G network on a low-end device, it takes over a minute. And I made everyone put their phones away, I made everyone be super quiet and just stare at the screen.

[00:05:04] As like, I want you to feel this pain in your heart, right? And I made people, and I actually got in trouble, I worked there, and it was totally worth it. But that's what we're doing here with server side rendering is we're kind of trying to fit our app the best way to human psychology possible.

[00:05:22] And I will say that server side rendering won't always solve this for you. Sometimes it can make things worse, so that's why measuring is important, right? Time to paint, time to first meaningful paint, time to first bit, these are all kind of brushstrokes on a canvas of what the performance of your application is.

[00:05:38] You have to take a look at it holistically, okay, that's kind of like a overall spiel and just web performance in general.