This course has been updated! We now recommend you take the Build Progressive Web Apps (PWAs) from Scratch course.
Transcript from the "Enhanced Client-side Rendering" Lesson
[00:00:00]
>> Mike North: So the first improvement I wanna make is something I'm calling enhanced client-side rendering. We'll talk about server-side rendering in a moment, it is a great performance improvement that you can make. It is complicated, it is tricky, it is error prone, I'm going to give you a half measure that is easy.
[00:00:20] There's basically no excuse, if your app looks like what we're working with today there's no excuse for this for failing to do this easy thing. And you get to skip all of this server side rendering headaches. So the idea here is if we're trying to get this, if I can give you a way that we can show the non data parts of the UI, right just the address bar or the menu bar at the top, the little footer, maybe the buttons.
[00:00:52] At least the user will feel like something is happening, and on a 2G connection, this is basically gonna take our load time down from around the seven second mark to below the two second mark, massive, massive improvement. So I should have your attention now, right? So here is the recipe, it's a three step recipe.
[00:01:21]
>> Mike North: We're gonna modify our index.ejs, our index.html thing, right? And we're gonna identify URL-agnostic parts of what is rendered on the screen, right? You're just gonna go look at your elements tab and say that, here's the HTML for the nav bar, for the menu bar at the top and here's the footer, and it will basically clean it up and I want that to be the starting point that we use.
[00:01:48] And I've taken care of step two for you, which is to take CSS, ideally this would be only critical CSS, but we're using a really tiny six kilobyte material design library for this. So we can get away with all CSS being treated as critical, but you would want that embedded in your index.html avoiding the need for a roundtrip request in order for things to get styled.
[00:02:14] The idea is as soon as the HTML file lands, you don't need a second round trip anywhere before you can get this screen showing up, that's how we get this screen showing up well below the two second mark.
>> Mike North: So I proposed that this is how we have altered our situation here, by the time we make a round trip and get the index.html, we're going to have our first Paint here and I've also indicated that we can be interactive at this moment.
[00:02:47] If you have not already been sold on the idea of using CSS for interactivity as opposed to JavaScript, this is a great reason, right? The difference between listening for a JavaScript click event to open up a menu, to expand it, versus a CSS hover effect, that hover effect can work right there without waiting for scripts to download.
[00:03:10] Anything that requires like registering a listener and running a code into hide or show something, that now, like that would not be interactive at this moment. So CSS is a powerful tool for and try to find way, at least your top level for navigation, can be driven entirely, by CSS if possible.
[00:03:33] And you can also if you knew just a little bit of JavaScript, maybe just adding in or removing a class for top level nav, it wouldn't hurt to maybe even embed that script in your index.html so it's there. Like as soon this lands, you put it so that it doesn't block anything else from downloading but you can have this one request, and you're ready to go.
[00:04:00] So then we can go and fetch our Java script, and it comes back, and we can parse it, boot it, go get some JSON, now we can start showing data. So we haven't really improved this metric here, but the other two we pushed, way, way, way back, they're in a much better situation.
[00:04:17] So this is what we're gonna be implementing. Now I'm gonna talk to you about server side rendering, which is the more general solution for this. It is inherently really, really complicated. It essentially means like your server is booting up, and programmatically grabbing the HTML for your JavaScript app.
[00:04:37] So it fits like start up your react app and go and send it to a particular URL and then wait for the all of the JSON to come back to it, and then grab that and respond with that HTML.