From the course: React: Software Architecture

Server-side rendering basics

- [Instructor] Okay, so the first architectural topic that we're going to talk about in this course is server-side rendering. Now, many of you may know what server-side rendering is already. I'll define it in just a second for those of you who don't, but server-side rendering is an extremely important topic for many production grade applications. And it can also considerably complicate the architecture of our application, which is why we're going to take a look at it here. So, first of all, let's talk about what server-side rendering is. In the normal flow of a React application, here's what happens. The client's browser makes a request to the server and loads the index.html file, which doesn't really contain anything. It's basically blank at that point. That index.html file then tells the browser to load our React scripts, which are the ones that actually render all of the HTML elements into the page. However, with server-side rendering, the server is the one that takes care of running our React scripts and rendering all of our elements. We'll see what this looks like in code very shortly, but first let's talk about some of the comparisons between client-side rendering and server-side rendering. So as we said, client-side rendering renders the app to HTML in the user's browser. So the user's browser is essentially the one that's doing all the work there. In server-side rendering, however, the server is the one that's doing most of the work and then it simply sends that finished HTML document to the client. The client doesn't really have to do very much in that case. As far as the order in which things happen between client-side rendering and server-side rendering, with client-side rendering, the process is pretty complicated. First, as I've said, we have to load the index.html file from the server. Then that index.html file tells the browser to load the JS bundle from the server that contains all of our React code. The browser will then run that bundle, rendering all of our elements. It will display our app and then it will still have to load the data from the server. So you can see, we've got quite a few round trips here. We've got at least three for loading index.html, loading the JS bundle, and loading the data. With server-side rendering, this process is quite a bit simpler actually. We start off with the server rendering the app, basically running our React scripts, converting it to HTML. It then loads the data, which is much easier since we're on the server. And after that, it will create an HTML document, which it will send directly to the client side. So as far as the pros and cons of each of these, with client-side rendering, there's generally less strain on the server. The user's browser is the one that's doing all of the work of rendering. However, especially in cases where users have a slow internet connection or where your users are geographically very far away from you, for example, if your servers are in New York and your users are in Australia, having these multiple round trips just to load the index.html, the JS bundle, and the data can really lead to a very poor user experience. However, with server-side rendering, since there's only one round trip, this can lead to a drastically improved user experience and it can also be better for SEO. However, obviously there's going to be more strain on the server since the server is the one doing all the work. So if you have a lot of users during a big sale or something like that, you're going to want to make sure your server's powerful enough to handle that.

Contents