--- title: "Astro FTW! Vue and React can work together in the same app" description: "No more comparison of which framework is better, Vue and React can work together in the same app. We're back with another episode of #Jamstack Fridays where Tony and Tim explore #Astro and what this new kid on the block means for modern web development." date: "2023-07-20T08:01:20.000Z" url: "https://timbenniks.dev/videos/uniform/042-surxtza2sa0" youtube_url: "https://www.youtube.com/watch?v=sUrxtZA2sA0" playlist: "uniform" image: "https://i.ytimg.com/vi/sUrxtZA2sA0/maxresdefault.jpg" tags: ["performance", "frontend"] --- # Astro FTW! Vue and React can work together in the same app No more comparison of which framework is better, Vue and React can work together in the same app. We're back with another episode of #Jamstack Fridays where Tony and Tim explore #Astro and what this new kid on the block means for modern web development. Watch on YouTube: https://www.youtube.com/watch?v=sUrxtZA2sA0 ## Transcript javascript dude i don't think that was really good should we do it again i'm gonna pick on you and talk about your pool actually if you wanna really record this is gemstack friday with tnt hello tony how are you hello tim amazing are you enjoying the pool yes and to give people some context i just bought a new house and it has a pool so that's why he asked me if i'm enjoying the pool and you know what today it's so cold no pool today that's why you decided to come and finally record at jams like friday right exactly you were enjoying the pool and we couldn't record and release anything yeah finally it's cold exactly but what i i would say we work at a startup and we run and sprint all the time but actually i was just in my pool but yeah we're back back in business so let's talk about astro so what do you know about astro uh when i first heard about it i started another framework and the way they present it on their website is build faster websites with less client-side javascript let me just share my screen so everybody can see that here we go continue please yeah and you're like i'm just pretty much reading the site and yeah yeah uh there's nothing really just just jumps at you when you look at it you're looking at it but if you watch the video and if you read the docs it kind of opens up this amazing opportunity for developers like us who like to pull in our own direction for example you certainly do that with react and you love to stick with view except i think astro will allow us to work in the same repo and write our own code and don't have i don't have to learn view no exactly and you know what i kind of like about this too is what they explain is what comes out it doesn't actually have all these javascript bundles that then hydrate your page they can just output the html that your reactor view rendered as html basically but you can also add javascript and say only hydrate this little bit with a little bundle so we can kind of make javascript less websites it's like we're going to go back to the 90s i'm actually excited because it will probably get faster right what do you think yeah it will get faster it will be less less bloated i i would say and yeah we're all about performance and think about this it was performance performance performance now like technology is going in the direction of okay how can we make it even easier for developers to continue building their stuff without learning and taking courses and learning what they learned to like for example i started with react let's say and now i need to learn view and i think with astro will give me that opportunity not to learn so many frameworks i can just stick with what i'm keep it a bit more simple so actually the word simple is paramount here so let me just go to my other tab because this is what i built just this is like an i don't know reading the docs and trying something really fast and so i make a bunch of videos so i just queried my own website got the videos in and use a little view component to show this here and so then when i click on this no this is what you call the demo effect let me check what i do to fix this a few moments later here we go okay so basically i made a list of videos you click on the video and you can watch the video it's very simple and there's some astro html in here but there's also vgs stuff in here and so all these items and with the tags and stuff like that there are actually little few components that get hydrated on when it's in view so when i scroll down you can see them come in a little bit that's hydration and when i then click and go to this page this is just astro there's no vgs here oh that's kind of a crazy picture let me just go back and so when we look at that code there's not much going on right so this is my astro index file and so it's a dot astro which is cool it's a little bit like the dot view files and in between these guys here you can add some javascript or typescript or whatever you want and this happens on server side rendering and so i just have like a little page here i query my website this is a prismix cms i query the videos i map them into something and i loop over them with some sort of jsx like templating and then this video item here that says client visible this is a vgs component but the rest is just astro and so that vgs component is super simple it's just there's a prop that is a video object and you just render the video and that's actually all there is to it and when you then click on that video you go here and um here i actually yeah there's a little bit more to it because you what you could do is make a collection in astro and so this is like grabbing all of the things that are possible so astro knows what to render if it has to render a list and now i just map my the url that i have in the in here like when i click on this you see that url that slug i just you just filter it out and show that video but because of this collection astro can now render all your videos when you now hit mp and run generate right that's why it doesn't need to get static paths that next gs needs for example so enough is enough you've seen my astro stuff you've seen my few stuff but how about you tony actually add some react to this and still make it work let's do it let's do it okay let me just share your screen then okay there it is take us through what is needed to now add react to this okay so few things first of all let's add a react renderer so we're adding this into our package json or you can run yarn add and that will be your command that will automatically add it into your package.json as a dependency next will open astro config file dot mjs and inside of renders we'll add a react renderer here as well yeah so i actually went over this too fast you need a renderer for view also as you can see you can also add both which is really cool yup yup yup so and then if you want to render something else you'll have to add it here but we're just doing view and react so as you can see uh application will now have a react as well in the same repository yes so next step is to let's go ahead and create a component a react component so we're going to go into components as you can see this is tim's component so this is his repository and i'm just just to show you the same stuff yeah so this is the view one this is the one i did and this is the react component so we're importing react and we're having props past passed into the function and then in the return statement we pretty much are replicating what tim has created so let's go ahead and maybe throw this on the side just show you side by side yeah exactly so i just have a bit more html because of adding more attributes to the image tag and there's extra stuff but in the end this is relatively similar right and could you show like the astro um index file so you can see how these both these components live together yeah yeah i'll i'll i'm going there next so yeah oh sorry sorry oh yeah it's all good so same thing as we can see so we have a a tag we have an image then we have an article with a date and title so pretty much everything identically what tim has done or what you have done tim and then i'll go ahead and close these files just to clean up my space and then i'll go to page and then i'll go to index file so in index file as you can see we have a video item which is a view component yeah so it's learning yeah exactly it's an import yeah yeah and then we have and now a react component imported also in the astro one thing i wanted to also highlight that this is a syntax so these three dashes are important so that's how astro understands that this is uh this is the relevant code that they need to kind of parse yeah and this is only rendering on server side if it's between the dashes but you can also add a script tag somewhere else and that becomes then client-side and put into your bundle in the front end yep yep so let me just actually do this let's see if it will break view react there we go and then in the code below you can see them just living together just like two normal items like it was html which is pretty cool yep like two friends identically identical code everything is identical so let's actually go ahead and run this and see what happens yeah after add react so it will do yarn start and i have a feeling it might break because of those comments maybe maybe not i'm thinking it's just a javascript block so i'm assuming it should be okay all right oh look at that everything is cloned so yeah as you can see one thing that uh specifically was done just so you guys can see so there's no so there's an image date and title so there's no uh tags and that's how you can differentiate which one is a view which one is a react component identical stuff just identical information identical props but obviously utilizing two different technologies and that's just this is just insane and i love it and you know what i like most i would say is if you don't need any front-end javascript for this the output of this is just html there's no react or few bundles unless of course you choose to hydrate this on when it's in view which i did right when you scroll down it hydrates these items if you turn that off it will just render it as html like in ssr basically but it's jam stack so it's super fast so you can use your whole tool chain either react or view or both or add svelte or something crazy and it still works so do i need to rebuild my website again with something new what do you think would should we try this as i mean this is this is actually really good uh it is like a one file there is almost nothing to it this is literally deck set it up type it in done it's yeah and and imagine like you have a somebody's building your site and you have developers who are view developers and they build the site and then you have a react developers coming in and instead of going in and okay let's rebuild everything this is view no you just leave what's there and just keep going and you have react components that are built on top and they'll live side by side so yeah yeah crazy i love it i'm i'm ready to for the future because we're going back in time to simpler systems but with modern tool sets and what comes out is probably super fast if you put it on cloudflare or netlife or something so yeah inspiration i hope that this actually helps you as a viewer to also try something like this and leave a comment if you're interested so uh tony what's your next step with all this stuff you want to do something else with it we will we'll do something out but for our viewers we'll probably drop a link into a comment of this running on one of the modern cdns we're going to deploy it open source the code for you so you can grab and play with it yourself but uh tell us what you want to see next what you can build with astro maybe you want another framework add it into whatever we just added with tim or what i'm now thinking is why don't we add something more dynamic to it and only have small bundles to do that like the personalization we do with uniform we might be able to put that in without like the full react library i'm pretty interested in that let's have a look um that might be um i'm digging my own grave but maybe maybe it works anyways cheers man see you next friday good to see you