Tech Talk: Client Side vs. Server Sider Rendering

all right good afternoon so my presentation today is on server-side rendering versus client-side rendering and you guys are probably asking yourself at this point which is better or which is better for me and the answer to that is well it depends depends on what you want to do and what you want your site to look like but the good news for you guys being that you're all react experts at this point is that react can do both so today we're going to talk about what's happening during client-side rendering what's happening during server-side rendering a comparison of the two in terms of performance and one case a so let's begin with client-side rendering because I think at this point this is what we're a little bit more familiar with now and what exactly is happening during client sine rhetoric so your initial request loads the page layout the CSS and the JavaScript sum of all some or all of the content isn't included instead the JavaScript makes another request gets a response most likely a JSON and generates the appropriate HTML likely using a templating libraries such as react and for subsequent updates to the page the client-side rendering approach repeats the same process so this is what client-side rendering looks like in a graphical form the server sends a response to a browser the browser downloads a j/s the browser executes react and while all this is happening we're going to see a loading screen or a nice little picture that you put to keep your users calm and then both at the same time you're going to see your page viewable and interactable server-side rendering is a little bit different and with server-side rendering your initial request loads of the page layout CSS JavaScript just like the client-side rendering but you're also going to have your content and what I mean by content is our HTML so this is what a set up for server-side rendering would look like in react you have your constant react and you can require react you're going to require react Dom you have your react Dom render like we are all used to but if you're using server-side rendering you're going to require react as well but you're going to want this little function here called render to string and that's going to come from the reactive Dom server you're gonna place your app inside of render to string and your result must be inserted into a target div so one area where a lot of developers go crazy is they think that server-side updates actually mean page refreshes and that's not always the case you can see here in an example using jQuery we're targeting an element called low tweets and on click we're going to make as requests to the server to get the tweets from that person we're going to enter in the last tweet ID any tweet that came after that last tweet we're gonna prepend to dump and we're using a prevent default to stop the page from re-rendering so in other words we're stolen doing a partial update but we're letting the server do the rendering and certain that finalized output into our Dom so this is what server-side rendering looks like graphically the server sending a ready to be rendered HTML response to the browser the browser renders the page it's now viewable and the browser downloads JavaScript the browser executes react meanwhile our client can view the page and after the react executes the page becomes interactable and just to highlight the differences if we look at them side-by-side this is where we can really see these differences come into play with client-side rendering it takes a little bit longer for the page view to come up but it comes up both viewable and interactable and server-side rendering our view comes up a little bit before but we have to wait a little while before it becomes interactable so why is server-side rendering faster well client-side rendering requires more JavaScript to be downloaded that means more JavaScript to be parsed requires a second HTTP request to load the content and then more JavaScript to generate the template even if the initial JavaScript is cached it still needs to get parsed and the second request isn't going to happen until the document is loaded with server-side rendering your servers response to the browser is the HTML of your page and it's already ready to be rendered so comparing the two server-side advantages over client-side the initial page load is faster the blank page flicker that we all see every once in a while that happens with server client-side rendering doesn't happen with server-side rendering server-side rendering is great for search engine optimization your content is present before you get it so search engines are able to index it and crawl it efficiently something that's not so easy with client-side rendering it's great for static sites so think about sites that are very heavily text-based like maybe the New York Times or WordPress in those situations we might want to consider server-side rendering over client so the cons over of server-side rendering over client-side rendering frequent server requests and frequent server requests can cause bottlenecking with sites that are very interactive the throughput of your server is significantly less than with a client-side render and for react in particular the true put input the throughput impact is extremely large react Dom to server render to string is a synchronous CPU bound call it holds the event loop and it means that the server would not be able to process any other requests until react Dom server rendered to string completes let's say it takes 500 milliseconds for your render to complete that means at most you can do two requests per second and this is a very big consideration if you want your page to be interactive you have an overall slow page rendering while the page view comes up earlier your clients not going to be able to interact with it right away until react is done executing so all of these factors lead to non rich site interactions so we can do a case study of walmart.com walmart.com recently switched from client side to server side rendering and Walmart labs made substantial improvements and they release some of their code as a framework called electrode j/s and during the redevelopment of their site Walmart labs developed a new framework and it improved the render two-string time by up to 70 percent so if any of you are considering doing some server-side rendering it electro das might be worth checking out it's available as an NPM download and this is just a page highlighting the improvements as you can see with server-side rendering the home page category page and search page all come up a lot faster than with client-side rendering so in conclusion the server-side pros are search engines can crawl the site for a better search engine optimization the initial page load is faster and is great for static sites server-side rendering cons are frequent server requests and overall slow page rendering full page reloads and non rich site interactions the client-side pros are we have richer site interactions faster website rendering after the initial load it's great for web applications and we have a robust selection of JavaScript libraries to support it and our cons are a low search engine optimization if it's not implemented correctly the initial load might require more time and in most cases it requires an external library so once you use SSR you might want to consider server-side rendering if you need search engine optimization I'm being Yahoo or bi do you already have a working react react app you need the best possible performance and you're willing to pay for the extra server resources I would also add in if your site is heavily tech space you might want to consider server-side rendering and you might not want to use server-side rendering if your react app isn't finished yet get it working first get it up and running and then worry about the optimization later if the search engine optimization it on Google is good enough Google is a particular case where there optimization works particularly well with client-side rendering the other search engines not so much and if your server resources are scarce perhaps too perhaps due to the low budget or an inability to scale then server-side rendering might not be for you and that's it thank you very much [Applause]

Channel: Fullstack Academy

Views: 71,412

Keywords:

Id: Y2spCNZDt84

Length: 9min 6sec (546 seconds)

Published: Fri Sep 29 2017