What are Server Side Rendering (SSR) & Client Side Rendering (CSR) | Pros + Cons

welcome friends to today's lesson on client-side and server-side rendering we're going to be going through a practical demonstration to understand the differences between each and learn the disadvantages and advantages of either and so to get started i prepared an application with a server that sends up some static content so the static html page however this static html page down the bottom has some javascript that will run on the client side application on the client's computer and will dynamically render some additional information and so if we look at how this works if we come to a local host 8383 we can see that we have this little page here we have some server rendered content and if i refresh the page you can see that we have this dynamic word there that is client rendered now in this particular instance because of the fast internet speed you can't actually tell the difference between the client rendered and server rendered information but if we come and look at the networking tab we'll see that the server rendered information is pre-prepared by the server and sent over virtually complete whereas the client side rendered information is incomplete and so if we look at the networking tab we'll see that when i refresh the page we have two requests going through the first one has our pre-prepared server rendered information and so if we just look at this little preview we can see that we have almost all of the information that we get in our website except for this one word and now we have a second request that gets sent out by the script at the bottom of the html page that client renders the word banana and that's what we see here and it changes it from that loading state to that dynamic word now the first thing you'll note is that for search engine optimization search engine optimization works primarily by looking through the words in the server rendered content and when you google search something if those keywords are contained within this html then your website might pop up and so if we were looking up this is server rendered then this would be a great page because our server rendered information contains these keywords and google can recognize these keywords however if we were server rendering information about bananas this website would not be great because the client renders the word banana it's not contained there when google does its initial search and on that first request and so consequently client side rendering is not as great for search engine optimization but it is good for instance you might have an application behind an authentication wall and so suddenly when users are logging in it's quite an interactive page this client rendered information is not so bad it's much more dynamic and the search engine optimization of things behind an authentication wall is often not so important now the second thing is when i reload this page you don't really notice a difference between the server rendered and client rendered content all we can see is a near instantaneous page load and some client rendered information but they appear to be coming through together however if i throttle our internet to a slow 3g we can see that the server rendered information comes through and then it takes an additional period of time to client render that information and so that's just an example of how a server rendered page is often much faster because the server pre-prepares the html and it's only a one-way communication whereas client-side rendered information takes some additional processing of the script file on the client's computer to generate the website so it's essentially two processes as opposed to one so just to summarize server-side rendering is good for search engine optimization fast initial loading and mostly static content so content that's not really going to vary for example a blog site is great for server-side rendering as the content is essentially the same not much variation and so it's really effective to have a fast loading page so we can pre-prepare that on the server and send it straight to the client as opposed to a client-side rendered application you know that might be as i mentioned anything behind an authentication wall or whether a lot of user interaction where page load is less important there's a lot of dynamic content or search engine optimization is not so required but anyway that kind of covers the basics most javascript frameworks nowadays allow for a combination of the two of them so you're more than welcome to use either wherever feels most appropriate hope you learned something catch you guys later thanks for watching don't forget to like and subscribe peace you

Channel: Smoljames

Views: 64,700

Keywords:

Id: ObrSuDYMl1s

Length: 4min 54sec (294 seconds)

Published: Fri Apr 29 2022