one of the things I love the most about Astro is how simple it is on the surface and you know how complex you can go if you have more advanced needs a good example of that is asteroids and rendering options and that's what we're going to check out today [Music] hey what's up my name is Chris and welcome to coding in public in this video we're going to look at the different rendering options available in Astro and these basically fall into two categories but then I'm also going to talk a little bit about middleware and also about Astro Islands so let's start by just talking about a basic astrocyte so generally speaking if you don't change anything in astra's default options when a client comes and visits your site it will request from the server that server will send back HTML Now the default behavior is for this to be static so if you're not sure what that means let me come over here basically what happens is when you go and build your site it builds everything ahead of time so it creates these HTML files that are just then sitting on the server so when somebody comes to your site they come over here and the server says oh you want this page sure and it gives you this page and this page comes over here and now they have the page so it's very very quick and again it's all statically built ahead of time now what that does mean though however is you can't like dynamically build stuff per user so it's just a static file they get back the static file everybody's getting the same static file until you rebuild the site now there's another option and that is called server side rendered so a server-side rendered site still will return HTML but instead of having HTML sitting on the server pre-built you have the code that will then generate the HTML for them now the cool thing here is you can actually have things on the request so for instance you can have like a you know a query for like search item or whatever I don't know and it will search that and then dynamically generate the HTML for them and spit it back so what it's going to do is come in here and it's going to change this to HTML as it renders it and then you'll send this HTML back to the client so it's still the same basic process that I showed you up top here where they get back HTML it's just done a little bit differently where you've got a little bit more dynamicness on the server now there's some advantages there obviously like it can be more customized however it usually is slightly slower and also sometimes you're just pre-building or rebuilding sites over and over again that could have just been rebuilt so there are two options when it comes to server side render but generally speaking these are the two categories in Astro either automatically build them ahead of time or have them server side rendered now if you think about this what are the two kind of use cases you would have well on one you might say hey normally I want a server-side render them but occasionally I might want a pre-built page if it's not going to change much I don't need to rebuild it every time somebody visits that page however you might want the opposite side where you say hey you know what I actually want most of my site statically built like this and occasionally I have a route that is server side rendered and those are actually your two options here with server side rendered so without getting too complex and I will show you the code here in a second whenever you do a server side rendered whether it's defaulting to server-side rendered or defaulting to SSG with the option of server side render you have to have what's called an adapter now there are a bunch of different adapters available and If I go to the docs and scroll down this way you'll see that we've got cloudflare Dino netlify node and Versa right now now there are others that could create them but because you need some kind of server runtime you have to have an adapter so it can basically interact with your different routes okay so with that being said you have to have an adapter either way if you're using SSR but they found that not everybody wants everything server-side rendered sometimes again you want things that are rebuilt so what you can do is by default kind of default here for server side rendered is just say hey render everything on the server unless I tell you not to how do you do that well on a per route basis you can say export const pre-render 2 in that front matter and it will basically pre-render this or statically build it ahead of time that means you could actually have an HTML page sitting on your server for just the page.astro route now what they found is people started doing this and they did it for a lot of their sites so maybe 60 or 70 percent of their site was statically built ahead of time and they just wanted the benefit of the service I rendered on a few sections so they created a new Mode called hybrid now what hybrid allows you to do is basically do the opposite so everything will build statically by default and less on a certain route you set it pre-render equal to false so you've got a bunch of different options with Astro if you need that kind of complexity again just to walk through that one more time by default if you don't do anything this is what happens when you hit npm run build or whatever your package manager is it will actually build ahead of time and send all that HTML stuff to the server then when somebody requests sit they'll just get HTML back however if you want to server side render it in other words you want some more Dynamic loading as people come to certain routes you can add an adapter which will then allow you to server side render either some or all of your site if you want to do all of your site this is the default output server and you just don't have to ever pre-render anything however you can on any individual route say hey build this ahead of time on the other hand if you want it to be primarily static but you may want a route or two that is actually server side rendered you can come right in here and just set pre-render to false assuming that you set your output to hybrid so these are the different rendering strategies available now before we quickly look at the code for this let me talk about two other Concepts that you may need to understand when it comes to routes themselves all right so here we've got what's called middleware This is fairly new in Astro but basically there is another idea that has to do with routes and that is this middleware concept and basically an astero you can have middleware that will intercept requests and this works with both statically generated sites or server-side rendered sites then what it will do is be basically process whatever that kind of in-between step is and it can inject things into the final page itself so this middleware is kind of another way to intercept and work with routes but it's technically different than these strategies for rendering now this video is not about what middleware so that's as much as I'm going to say but there's also something called astral islands and maybe you've heard about this as well you say hey I thought you could have like react or things like that well you can but basically what happens is when you come to a page right here you can see I've got some static content right here that will be basically just plain HTML however I also have this right here now for my sake I'm just going to call this a react component and you can set these different client directives here I have client load which says Hey for this interactive JavaScript component I want you to go ahead and load all the JavaScript needed as soon as I load the page so what happens is let's say I'm statically generating this entire site this is the default Behavior you could also do this with SSR as well but as soon as this is this page itself is requested the server is going to send back both the HTML and then whatever JavaScript is needed to actually run this component right here so in other words inside of a kind of an ocean of static content you can have one little component here that's hydrated with JavaScript now there are other directives besides client load if I pull this down so it's now in the viewport you're going to see that I've got this image Carousel that I'm saying Hey whenever it's visible in the client that's when I want you to send that JavaScript so let's say that the page HTML has already been sent and maybe this react code has also already been sent just for this component up here let's set it up here just to make that clear however as soon as this gets in view then I'm telling the server go ahead and send me the react for this as well so now I've got the reactant need for both of these loaded on my page but that's the concept of Astro Islands in other words you can have a mostly static page whether that server side rendered or it's pre-built ahead of time either way and then as you need more interactivity you can use things like react or view or svelte and obviously some of those will be a little bit different depending on the framework you use but generally speaking you're going to just use a client directive to tell it when you want what you need to be interactive with that individual component well I hope that was helpful to talk through both the Astro islands and also the middleware those are related to rendering but obviously not rendering itself so let's now look at these two different options in actual code all right so here I am over this way and I'm going to go ahead and open up this Astro config.mjs now if I were to come inside here you're going to notice first of all I'm just using a kind of a blank project template and so what that means is it's using static site Generation by default so if I were to open up the terminal here locally and if I were to do pmpm run build that happens to be the package manager I'm using it's going to pre-build all those pages and it'll put that all out here in this dist folder for me if I come in here you can see that I've got static routes for each of these right just HTML pages that will then be sent to the server the server all this will be sent to the server and that's what the server will use whenever I request a certain route now if I come back over this way remember we've got these different adapters that we can use and they've made really easy which is how Astro typically works here where you can just add one like this so let's say for instance I want to add netlify I'm using pmpm so that's what I'll do I'll come back over this way and just add that adapter now when I add that adapter it's going to give me access to those two other options so I can server side render by default and occasionally have a pre-rendered page or I can go the opposite way without output of hybrid and that will allow me to statically build the entire site and occasionally have a server-side rendered route all right so back over this way it's going to ask me a couple questions so is it okay if it installs that yes it is next it's going to actually tell me exactly what it's going to do to my config files in the school so I'm going to go ahead and do yes and now we're set and ready to go so now I'll simply do it pmpm run Dev then I'm going to go ahead and shut this terminal down so we can see what it's done over here okay so you can see that it's added this adapter for netlify and again you can use any of the adapters available and it's at the output to server so if I come back over this way what that means is it will be server-side rendered by default the entire site will be however it will then allow me per route to set this pre-render equals to true now this server and this adapter this is what enables all of that so let's go ahead and come in here and now let's pmpm run build this once again okay so now you're going to see something a little bit different here you'll notice I don't have any folders for my individual routes and now I have this netlify redirects file right here where it's telling me basically how it's going to redirect each of these things to dot netlify functions entry so this is part of the adapter that netlify has created that basically allows you to see where each route is supposed to send you now inside here you'll have things like the Astro CSS files and here you can see this header link right here but you can notice that basically all I have is the code to then basically create all these routes instead of at the actual routes themselves now let's go ahead and come into a single route maybe let's just come in here to pages and let's use the about route now remember if I come up here I can say export const pre-render equals in this case by default nothing will be pre-rendered but if I set this to true now this page should be so let's one more time run this and you'll notice we've got a change if I come up here I've now got an about folder with a statically built index.html page so again this is everything is server-side rendered by default however I can pre-render a page to true if I want to now if I come back into my Astro config file we have another option that was our hybrid option now if you might remember if I come back over here this is where it will statically generate by default and then on any individual route I can say hey give me a server-side render page for that so if I come over here let's go ahead and go back to the about page and for right now I'm just going to go ahead and comment this out if I do pmpm run build this should do the exact same thing as the default behavior for Astro right because I'm saying hey statically built the entire thing ahead of time so if I come over here you're going to see I've got my blog I've got my bout all this kind of stuff is pre-rendered my index page right here so it does actually include this redirect file because I've got the netlify adapter but if I open this up you're going to see that it's just pointing it to the index pages that I already have right here okay so that's set and ready to go now let's actually use this here so let me come in here and this time I'm going to set this one to false so in other words I don't want an abouts folder let's see if I come back up here I don't want this about folder right here I don't want it to be pre-rendered so again one more time we will go ahead and build this and now you'll notice that I do have a Blog folder and these are all statically built I do have an index HTML but I do not have that about folder because it has not been pre-rendered if I open up this redirects file you'll see that I now am pointing to a function that will basically point it to this entry for about and generate all the code I need whenever somebody comes to visit that site well I hope this was a big help in understanding how Astro works and the different options available to you for rendering if you're interested in middleware or in those Astro Islands let me know and I'm happy to do a separate video on them all right well thanks so much for watching I will catch you in the next one happy coding