Server-Side Rendering: TL;DW - Supercharged

Key Takeaways

[Music] hello and welcome to the supercharged tldw last time Paul and I took our Advan through the code and build a back end for it that does serers side rendering I'm going to show you what that actually means in the browser so if you look at my screen you see nothing new it's still the advanc that we build 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 Nam 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 Conor or as we call it the 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 homepage the about section the contact Section whatever we have in the site NV the server takes this request and reads a header file the contents and the foot file and assembles these three parts into response that get sent back to the to the browser however if there is a partial flag present in the query part that is instru 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 serers site 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 uh let's jump straight into the code uh we're going to start at the bottom because that's the logical thing to do so we're using Express to uh start our web server and we are using Speedy because ironically the actual htb2 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 serite rendering and below that we're just using expresses static middleware that does nothing else and do 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 serers site rendering function uh 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/ 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 parents object which is the first parenthesis from the reg expression meaning it is an empty string if you're on the homepage or 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 there a partial request the only file that we need to read is the index HTML of that subsection so if we for example look in the index HTML of the about section it just has this one line that I showed in the def tools 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're using handlebars the reason we are uh using handlebars which is a templating engine is because we have to do minor manipulations in the header to accommodate for the data we're 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 serers side rendering logic so we wrote a little handlebar 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're actually going to inject the data and this is what we're doing next uh 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 eag this eag 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 checkm to build it based on the contents we uh adding these ech headers via the set method of our response and we also set sensible cach control headers these cash control headers mean that even though the client is allowed to cash 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 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 site 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 fulllength live stream that Paul and I did where you can see how we buildt 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 should 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 live stream and you will have an hour long of pure entertainment