Make your website even faster with Astro!

hello what is up welcome back to another video and so today yet again let's talk about some jam stack and so especially about performance and new ways to use the jam stack to get even faster websites because gemsec is considered to be the fastest website right you create a static page you put it on the cdn and you scale to infinity however i think there's a little new ones we need to add to this to actually make sure that we understand why we need less javascript to make your site even faster because there's lots of people that actually get cheaper devices now because in the second and third world everybody is going to come online now and these devices have the promise to be fast but they really are not and javascript is the thing that box them down so wouldn't it be cool if i could use my favorite framework like view or react and then at the and then render a gemsex site and then choose exactly what javascript is going to the client and which is used in ssr on build time right and so there is a tool like that now and it's called astro and it's probably going to be one of my more favorite tools because it allows me personally as a developer to choose which bit of javascript goes to the client and that just makes the site so much faster so in this video i will show you how i used astro prismic view and react yes all of them together to actually build an experience and that works really well so let me show you all right we are in the browser now and as you can see there's a list of all my videos so i've queried prismic i've gotten all the data and i looped over it and i rendered these items and as you can see those are a few items i added a little view tag here so i use 3ds to render the image and the text and stuff like that and then when i click on one of those items i'm actually going to an astro page where there's no vgs at all the interesting thing here is this is few right but look at the network tab there's no vgs bundle because it's done on ssr so let's have a look how i did it so in the astro index file which is you know they use a pages folder and if whatever file you put in there becomes the route it's like next and next do it as well and so there's one extra thing that's a bit different here you have this block here between those lovely dashes inside here you can actually code whatever you want and this is ss art so all the consts and props and whatever you you return here go into the html below and it will all be server-side so you can see i query prismic here i import my view component i map over my videos and then here there's a bunch of html and this stuff here is like jssxjsx like astro code and so i'm mapping over my videos and i load a few components here and this is my view component so when we have a look at that view component it's just a normal view component you know there's a video prop which is an object i can show all the stuff i loop over the text just how you would do it on view however someone with a keen eye might have seen this here this is actually the same component in react you just write it slightly differently right you just add props return and then do the same html and so if you can see in my astro config i actually have render review and renderer react and so we can use whatever we want which tools they have a renderer for and you can run with it so how about we add that react component inside right so do import and we i just called it react here from and then we call it components and then video item react.jsx and i probably have to do this okay so now we've loaded react and how about we just do this then react and give it a video prop right now if we save it won't work because actually you cannot have two root items here so we have to add like a little fragment oops oops auto complete okay the fragment was added so we now have looping over a video or over all videos i give the video to both components and so as you can see already in the background refreshed we have now view and react items still no bundles here which is cool right so i now can just grab a react component if i like it or grab a few component if i like it put it in and everybody's happy however what if i wanted to use few gs components as a bundle on the front end to hydrate and react we keep ssr so how about we do that now so what you can do is this client visible so when it's visible in the client hydrate it and now we just it just reloaded itself right and look there's a whole bunch of fujias stuff now actually in the network tab and suddenly this guy all these few ones they are now actually hydrated on when they are visible in the browser with javascript in the front end but if i didn't want to do that i would just remove it it refreshes and now there's no javascript used anymore i can also do something like only when my processor is idle now load it in and well my processor was idle because there's there's not much happening so it it it did it immediately but that is a really nice way to code because you can choose which bit of javascript is going to go to the client and which bit is not anyways that was it i just wanted to show you the awesomeness of this and the the huge potential this has for the future of how we build websites anyways thank you for watching and i'll see you next time cheers