SSG vs SSR Explained in 10 Minutes (For Beginners)

if you pay any attention to Modern JavaScript Frameworks like nextjs you might be overwhelmed by how many different options you have to render content to the browser page so let's talk about two of the most popular options which is SSG or static site generation and SSR serers side rendering so let's start by getting a couple of terms that are going to be really important for how we distinguish these the first one is build time and that is when the application is actually built now typically what happens is we connect an application to something like netlify or cell and every time we push code it automatically runs a build and then deploys that new version of the site so that build time is going to be executed on a build server somewhere or your host as you deploy request time on the other hand is when the actual request from a user comes in so let's say the user navigates to the browser they go to james.com that's the request that's being sent to the server and then the response will come back so that is request time and that's really important as we distinguish between SSG which is static site generation and then SSR which is serers side rendering because where they differ is what they do at build and request time respectfully so let's move on down and start to break into what static site generation is now the majority of the important parts of static site generation happen at build time so we mentioned we might deploy an application to netlify or verell these are two of kind of the def facto way to deploy many of the sites that we create these days and so on netlify or versell we have a build server and this is where it runs the actual build of our site now with a statically generated site or with statically generated Pages the outcome of that build is exclusively static files like the index.html the blog. HTML and you may get down into nested routes or dynamic routes where you have blog SL blog one blog 2 Etc so the important part about this is statically generated Pages at Bill time are going to already calculate or create those pages and the outcome of that is going to be hosted on a CDN CDN is a Content delivery Network netlify and versell take care of all this for you what that means is those files are going to be replicated all across the world and what's cool about this is because they're replicated all across the world wherever the user is making the request from it's going to grab the file that's closest to them so let's say I'm in the US it'll grab a file that's in Us East probably in Virginia and a CDN there if I'm in Japan it's going to make the request to the local data center that has a CDN there in Japan or nearby so that means that these pages are going to be already calculated they're going to be they're going to be replicated on a CDN and they'll be sent down directly to the user which should improve performance and make those pretty quick that's a lot of the benefits that came with static site gener static site generators and what people have really enjoyed about them but static site generation has kind of led to some limitations that has brought us back to the idea of server s side rendering so before we get into that really quickly we can uh address the request time so we talked about build time where we build these individual Pages like we just said as the request from the browser comes in it's going to hit the CDN it's going to grab the appropriate static file and it's going to send that thing back directly which should make this a really fast process so let's get into SSR which is server side rendering and at build time if you're just doing serers side rendering basically what this does is it will create the server and really what this does is it converts converts server side code to the host platform I don't know if all of that made it on there and let's move this over so a lot of what these Frameworks do is allow you to write serers side code in a way that you're not creating a full entire node server so a lot of it is with page based routing or file based routing where you drop in stuff into a file and the framework already knows how to handle that as server side code what you may not think about though is that has to be translated to something that the host provider can understand so in the netfi and versell use case these are serverless functions they may be Edge functions on versell depending on or NFI depending on how you have it configured but at Bild time the framework is going to go and take the source code and translate that to a way that's going to be able to be hosted as serers side code on the hosting provider netlify verell Heroku fly.io whatever you want to do it's going to make that translation to make this thing hostable on that uh hosting platform now the really important thing here is request time let's make this a little bit smaller so inside of an SSR application serers side rendered application you have an actual app server now notice if we go back up to the SSG we just had kind of the CDN here which its responsibility is just to respond back with files the server's responsibility is to actually calculate what the files are that get sent back to the user so let's take a look at this let's say we have a request coming in from the browser for /blog blog-1 so an individual blog post sends that request into the application server that application server now sends a request to the database saying I need all the data the actual content for this blog post after it gets that what the application server will do is actually generate this HTML page and it will respond back with that HTML page to the browser so the important part is as the requests come in the server is having to do some calculation on what the response is with statically generated Pages there's no calculation that calculation has already been done at build time but with server side rendered it's now doing that calculation real time when the request comes in and Responding back with that calculated file or markup HTML whatever you want to call it so what are some of the trade-offs with this or downsides with this well the downside is that the fact that you have that calculation potentially makes the is slower you can get into caching and other things like that but instead of just responding back with a file from a CDN since this application server is having to do work that is going to take some amount of time which makes this process slower now after you do this originally you can have this cash and we won't get into incrementally static regenerated pages but that's a whole another concept that we could get into in the future if you're interested let me know in the comments but there are some benefits that come with this as well so SSG is very beneficial for sites up to a certain scale because you're generating all these Pages at once versus at request time for SSR you're generating the page which means you don't have to have a super long build time to build hundreds or thousands of pages if you have a blog or a website that's that that is that big so if you have something that's really big number of pages wise this might make more sense you also have the ability with SSR to add in authentication to add in redirects to add in a lot of different things that add functionality to applications now you can also handle authentication and redirection and things with client side routing Andor with statically generated Pages by using client side routing but in my case I prefer to handle authentication on the server which means I don't have to choose loading states on the front end I don't have to choose conditionally which pieces of information to display on the application side I can do that on the server side before that content is already sent down to the user so just to quickly sum up SSG statically generated content at Bill time it's going to to build each of the individual Pages for your website versus SSR which doesn't build any by default what it does is a translation to be able to host this code on the server or the hosting platform that you're deploying to and then at request time it's going to hit the database or hit a data source to be able to generate that content and respond back to the user now what's also interesting about this is a lot of Frameworks now have the ability to do hybrid rendering which means for individual Pages we can choose whether we want it statically generated or serers side rendering rendered which gives us all the tools that we need to be able to make educated decisions on the best way to render individual pages in our application so that's SSG versus SSR if you have any additional questions let me know in the comments below I also want to share if you are interested in learning more about SSG and SSR in my Astro course which I just released about a month ago we have two different sections one is SSG focused and one is then converting to SSR and talking about all the things that we just talked about in deeper uh scale and also implementing things like authentication and some other cool features around this so if you're interested in learning more about that and one of my favorite Frameworks which is Astro you can check it out at astr course. deev anyways if you have more questions about SSG SSR let me know in the comments below be happy to help answer those if you have ideas for additional content that You' like to see in the future let me know that as well thanks for checking out the video and I'll catch you next time

Channel: James Q Quick

Views: 14,177

Keywords: ssr vs ssg, rendering strategies, javascript frameworks, nextjs rendering strategies, server side rendering, static site generation, static site generator, static site generator vs server side rendering, web development

Id: vRj84cs6oGs

Length: 8min 52sec (532 seconds)

Published: Tue Oct 10 2023