SSR Overview

Stephen Grider
A free video tutorial from Stephen Grider
Engineering Architect
4.6 instructor rating • 26 courses • 634,331 students

Learn more from the full course

Server Side Rendering with React and Redux

Build React, Redux, and React Router apps using Server Side Rendering (SSR), Isomorphic, and Universal JS techniques

08:12:53 of on-demand video • Updated August 2020

  • Understand the challenges of Server Side Rendering
  • Build a server side rendering boilerplate project
  • Use React, Redux, and React Router to conquer Search Engine Optimization
  • Master techniques for data loading on the server
  • Construct server architectures that can easily scale for large apps
English [Auto] In the last section we spoke about how traditional reactor applications have an inherently long load time because it's always going to take some number of round trips to our server before it can start to show any content on the screen. In this video we'll introduce server side rendering and get a better sense of how it dramatically decreases the amount of time it takes to get content in front of a user. Let's get a sense of how this works by seeing server side rendering in action just like the last video. I've taken the liberty of installing a boiler plate react project that makes use of server side rendering. So this is a boiler plate project right here. It makes use of server side rendering. Again I've got my request Lague open on the right hand side here. And just like before. I'm going to refresh the page and then we'll take a look at some of the requests that are being made. Now I've got another request to localhost 3000. If I inspect this first initial request right here I'll then hit the preview tab and here is the initial H HTML document that is sent to our browser from the server. If you recall in the last video when we looked at that initial HTML document it was quite sparse and the words there was not a lot of content inside of that initial document. In this case however and this entire document is on one line so I want to inspect the HBO documentary here but just to make sure it's a little bit more legible than having everything on one line. I'm going to paste it all into a little each T.M. formatter over here so it can get a better idea of exactly what each email is being sent down to us on that initial request. So here's that initial HMO document and as we start to scroll through it you're going to see that. Well there really is a lot of content inside this initial age HTML document much unlike the one that we just saw in the last video. So remember with traditional re-act apps like the one we looked at the initial request fetches an HMO document with essentially just a script tag inside of it and nothing else. In this case however when we start using server side rendering we see an age HTML document that has a tremendous amount of initial content inside of it. So for getting for just a moment how to save Simos document is generated. Let's just think about the impact of sending a fully rendered H.T. HTML document to our users. In terms of load time so we're going to pull up another diagram. Here we go. We zoom in so similar diagram to what we had before but this really starts to illustrate how much more quickly users get content on their screen. In this world the time to get content in front of our users faces is dramatically simplified from the initial request the user gets back. All the content that we want to show them on the screen so far as the user is concerned that page must have loaded up far more quickly than with a traditional react app.. In a nutshell this is what server side rendering is all about an unending focus on making sure that the user gets some usable viewable H.T. small screen to view as soon as possible. But of course you and I want to know a lot more about how this is working. So let's take a quick glance at a diagram to get a better sense of how this process really works. OK. So it's a little bit more complicated but we're going to do just kind of a cursory look at this diagram right here and then we're going to expand on this diagram a tremendous amount through the rest of the course. So I going to zoom in on it to make sure it's all nice and visible arrogant. OK. So here's our first taste of server side rendering and the flow behind it. Everything starts off just like before with the user entering the some address or the u r l for our application into the address bar of their browser. That makes an initial request to our server our server then immediately loads up all of the code for our re-act application in memory. So our server is very quickly going to be loading up our re-act application. The server will fetch any required data like say a list of blog posts or a list of comments to show on the screen whatever's necessary. The server will then take that data and render the re-act out. It will take all of the e-mail that is generated by the re-act application and ship it down to our users. So as far as the user is concerned that initial request leads to an HMO document that has a bunch of starting content visible on the screen. The process does not end there. However remember HMO content is generally not very interactive. That's the entire point of using react. We use react to make dynamic interactive applications. So after we ship down this XML document and the user gets some content on the screen we still want to load up our re-act application. So just like we would in a traditional react up after we load up that HMO document we still make sure that we load up our javascript bundle we go and get the bundle. We receive the bundle back to react application boots up make send requests for follow up data gets data back from the server and then renders the application on the screen again. So even when we start using server side rendering that doesn't mean that all of a sudden we're not using react on the client anymore. We still use react in the browser. We just defer loading of the re-act application to be a little bit further along the process. Again the entire key to this process is understanding that we want to get content visible on the screen as soon as possible. After that we can create the we can treat our application as a normal react up just as we are 100 percent used to doing in the past. OK. This video we have done a kind of preliminary overview of how server side rendered apps work. Of course we cannot get a good sense of what's going on without putting this all together ourselves. So let's continue the next section and discuss an application that we're going to build to get a better sense of how server side rendering works.