 Hello and welcome to the SuperCharge TLDW. Last time, Paul and I took our advance through the code and built a backend for it that does server-side rendering. I'm going to show you what it actually means in the browser. So if you look at my screen, you see nothing new. It's still the advance that we built, and we can go to all the different subsections with the nice transitions that we have. However, if you look at the network panel, in this case, we are only transmitting minimal amounts of data, named the exact data that we need to show what the section is about. And yet, if I refresh the page, it still works because in that case, the server has decided that the entire scaffolding needs to be sent. And to how that works in detail, let's go over to Theory Corner, or as we call it, Theorieikke. Welcome to Theory Corner. This node server is what we have built. It's a web server written in Node that takes the requests from the browser. These requests could be for the home page, the about section, the contact section, whatever we have in the side nav. The server takes this request and reads a header file, the contents, and the footer file, and assembles these three parts into a response that gets sent back to the browser. However, if there is a partial flag present in the query part, that is instructing the server to only send back the contents, which is what happens when we do dynamic in-page navigation. And this is actually what is called server-side rendering because if the initial request is for about, the server will basically inject the contents for about into the return page, into the scaffolding that is around it. Let's look at the actual code back in real-world corner. Let's jump straight into the code. We're going to start at the bottom because that's the logical thing to do. So we're using Express to start our web server. And we are using Speedy because, ironically, the actual HTTP2 module doesn't work with Express, but Speedy does and serves HTTP2 and not Speedy. So that's kind of nice to have. So we have our certificates here. We're starting a web server that serves our app, and we're binding it to port 8081. The actual app itself consists of two handlers. The one handler that we're going to talk about in a bit that actually does the server-side rendering, and below that, we are just using Express's static middleware that does nothing else in the straight-up deliver files from disk over the network. It's just static file delivery. So let's talk about the actual heart of this server, which is the server-side rendering function. It is a handler, and it takes care of all the requests that are for HTML websites. These can have multiple shapes because it could be just a slash, it could be slash index HTML, or it could be any of the subsections with an optional index HTML at the end. And we turn that into a regular expression and just put that into the Express handler. And the first thing we do, we are extracting the zeroth element from the parent's object, which is the first parentheses from the regular expression, meaning it is an empty string if you're on the homepage, or it is the name of the subsection if you're in any of the subsections. And what we are figuring out next is, if this is, as I mentioned in theory corner, if it's a partial request or a full page request. If it's a partial request, the only file that we need to read is the index HTML of that subsection. So if you, for example, look in the index HTML of the about section, it just has this one line that I showed in the DevTools earlier. If it is not a partial request, we need to read the header file, the partial file, and the footer and assemble these to form the actual response. What we're doing next is, after successfully reading all these files, is we're turning them into strings because originally we get back buffers and we can't really work on buffers, so we're turning them into strings. And then we are using handlebars. The reason we are using handlebars, which is a templating engine, is because we have to do minor manipulations in the header to accommodate for the data we are going to inject. And what I mean by that is, let's take a look at the header file, is that in the header file, we have all the views that are currently not visible. But these are four views and we only need three because one of them is actually going to be rendered by our server-side rendering logic. So we wrote a little handlebars handler that will exclude that remote view that is currently in use. So if we are on the about page, these three lines will not appear in the output because we are actually going to inject the data. And this is what we're doing next. We have these three files, we're just assembling them step by step, concatenating them, and then sending them back to the client. Additionally, we are also generating an ETag. This ETag is there to allow efficient client-side caching. It is purely based on the contents that we have and we're just using a SHA-256 checksum to build it based on the contents. We are adding these ETag headers via the set method of our response and we also set sensible cache control headers. These cache control headers mean that even though the client is allowed to cache them, it has to revalidate every single time a request goes out for the same page. In case an error happens in any of these steps, and this is one of the beauty of promises, we're just using the promise chains catch handler to set the status to 500 meaning internal server error and appending our error string so that we as a developer know what just went wrong and can fix our code. Luckily, that didn't even happen on stream so we could never show off that it actually works. And that's already it. This is how you do server-side rendering. You take the index HTML, you inject the content the user actually requested and then you send it back to the client. The code I just skimmed over is on GitHub and you will find the link to the repo in the description of this video. Another link you can find in the description is the link to the full-length livestream that Paul and I did where you can see how we built this entire thing step by step. If you want to know more, subscribe to this channel on YouTube or follow us on Twitter. Thanks for watching, see you next time. The lights up there, you can click them. It makes you subscribe, it's a good thing. And also if you want to see me panic live on stream where I can't figure out why HB2 is not working, go there, that's the livestream and you will have an hour long of pure entertainment.