Introduction: Why I Tried Astro
After hearing about all the hype, I tried Astro and I freaking love it. Here's five reasons you'll love it too.
What is up, everyone? My name is James Quick and I do weekly videos on web development related topics. And just like every other developer out there, I struggle with bouncing from framework to framework because you always want to try the hot, cool new stuff. And Astro is definitely one of those things, and I just couldn't help myself. So I've heard about it on podcasts, I've seen YouTube videos, I've seen people write articles, and I just had to give it a shot. And I did a live "try it for the first time" video live stream on YouTube that you can check out that video if you want to see a more hands-on approach. But I want to talk you through my favorite features, why I love it, and things I think you will love as well.
Now, my background, I come from a lot of React, I come from a lot of Next.js. I love Svelte and SvelteKit as well. All these things are great options, so don't let me tell you that Astro is the thing that you should go and do right now. Maybe it is, maybe it's not, you'll have to make that decision for yourself. But there are lots of really amazing features already baked in that I love.
Reason 1: No JavaScript by Default
That said, let's go ahead and talk about Astro and the things that I do love. So Astro by default, if you've heard of Astro, you probably already know this, but it's like the number one selling point I think, or one of the number one selling points, is that Astro ships with no JavaScript by default. So you create pages, you have file-based routing like you're used to in a lot of frameworks, you can create components, you can send props to components, you can do all these things, but no JavaScript by default gets shipped to the browser. Which means all these individual pages like your blog post pages or landing pages or whatever they are, it's actually just HTML that gets built at build time and then gets sent down to the browser.
Now one of the distinctions here is that this is not a single-page application, it's a multi-page application. Which all these acronyms and things get really confusing with all these frameworks that are doing cool stuff like Astro because the lines get really blurred. But what this means is each page that you go to with an Astro application, especially by default or just in general I think, are going to be new complete page loads. So if I go from one blog post to another blog post, I'm going to load the entire page. I'm not going to keep any of that markup in the browser, it's not going to do any secret requests behind the scenes just to get the data that it needs. It's going to load an entirely new page. For some people, you'll kind of miss out on the opportunity to share state between components and things like that, if that's something that you need. But for a lot of websites, most, a lot of websites, I don't know what a percentage, this is perfectly fine and I think it's going to work out well.
So these static pages are just HTML that gets sent down to the browser. So there's no JavaScript by default, which means there's no extra JavaScript that gets that needs to get loaded on the browser by default. We'll caveat that in a second if you customize this, but that is really, really cool. It's truly a static experience with the file just getting sent to your HTML file, just getting sent to your browser. I think this is neat, it's got obvious performance implications in it, and it's really, really cool. So no JavaScript by default with Astro. We'll talk about how you can add JavaScript functionality if and when you need to here in a second.
Reason 2: Built-in Markdown & MDX Support
Now the second thing I really love is that it has built-in Markdown support, and you can add an integration, which we'll talk about in a second, for MDX as well. Now I have recently been going through a migration of my personal site from Gatsby.js to Next.js, and to work with Markdown, I was having to add extensions, add customizations to do syntax highlighting with Markdown. Like maybe it's easier than I thought it was or that I understood, but I was struggling all over the place to get basic syntax highlighting working. But this works out of the box with Astro, which is really freaking cool. So if you want to write Markdown, if you're doing a blog or other forms of content, you want to use Markdown or MDX, it's just built-in, you don't have to do anything.
So the most you have to do is write your Markdown files. It'll actually pick up those Markdown files if they're in a pages directory by default. So inside of my pages/blog I have all of my Markdown files for all of my blog posts. You can have the front matter, the metadata about those posts at the top of it, and it gets pulled in automatically. And then it has a glob functionality, which is basically an easy way for you to go and query all those files to then create your blog landing page. The blog landing page is going to be the one that has the list of the individual blog posts. You can query all the metadata, the front matter from your blog post in there, and then display a link to get to the detail page of the actual post itself. And that content just gets pulled in. It's really freaking cool.
You can also define a layout component inside of your front matter, which will allow you to do a custom blog layout component for your blog post if it's different than the rest of your site. It's so freaking cool. And most importantly, this just works out of the box, as well as code highlighting. So you can see I've done nothing here to get this code highlighting to work inside of my blog post. So I freaking love this. I think Astro, the long-term benefit of this is Astro is going to have some more niceties in the future, my thoughts, that are built for these specific use cases. And anything that can take care of those tricky configuration setups for me is an absolute win because I don't want to do it myself.
Reason 3: Simple, Powerful Integrations
Alright, next up is the integrations. Now this kind of continues the story for me of Astro taking care of stuff that like should just be able to take care of for you. So here's an example: Tailwind CSS. Curious what your thoughts are on Tailwind, I love it. Let me know in the comments below. But Tailwind CSS is an awesome framework in my mind for styling your application. It's a utility-based CSS framework. And when you add it into any different project, what I've done with SvelteKit and with Next.js and others is you install a package, you create a config file, you update a line in the config file, then you import the things that you need into a CSS file, etc. And like, that's fine, it's not that big of a deal. But why, why would we have to do that every time? I feel like it's such a boilerplate thing, somebody just do it for me. And Astro integrations is the perfect example of this, where they have commands that you can run npx astro add and then whatever integration you want, like the Tailwind integration.
What's cool about this is all those steps that I mentioned before, it's going to actually do all of those things for you. You can see a little example in here. What I'm trying to say is when you run this, it will run through the specific steps that it needs to do for you and it'll ask you along the way, are you okay with installing this package, creating this file, etc? So you say yes, yes, yes, and it's done. And Tailwind just works and you're able to style your blog or website or whatever with Tailwind. So the fact that they have this integration story, here's the integration with MDX for example. Uh here's auto-compress for HTML, CSS, and JavaScript. You want to work with Partytown, which is something I heard of recently. SEO is something you have to have in all your websites. So many things. Notice I'm skipping some of the ones on here because we'll talk about those next, but so many things are just built in with official integrations and it's so sweet to not have to do all that stuff yourself. So integrations here are a super big positive for me. I love it.
Reason 4: Bring Your Own Framework (BYOF)
All right, next up is probably the feature, I think the no JavaScript feature and this one are the ones that people have heard about the most. And this one is the ability to use other frameworks inside of Astro. So Astro by itself has its own syntax for templating. It's pretty standard, use your curly braces and you get access to JavaScript basically in your data and stuff, and it's like most of the things we've ever seen. But it's its own thing. Let's say you have components that are already written in View or Svelte or React, or I think we got down to Preact or Solid or Lit, all these things, you can actually use those inside of your Astro application. You can use the React stuff that you've already done or the Svelte stuff that you've already done, you can just bring it right into Astro and it just works. How freaking cool is that? Like no other thing has that sort of functionality.
So here's one of the interesting things about this. You can pull in your components from these different places, but it's not going to load JavaScript by default. Remember, ships no JavaScript by default. So even if you add an integration to work with React, View, Preact, Svelte, etc., you can use it for your templating and stuff, but it's not going to do anything with state for example, by default. So if you do a counter and you increment the counter, it's not going to work by default. And that gets into the next point which we'll talk about in a second, but you have to enable, have to tell this thing to use the integration. So you can add this integration, it'll do this stuff for you. This is the manual process, so it'll do all that stuff for you. And then to actually take advantage of this, let's head to the UI framework definition or documentation. And it gives you an example of here when you use your different components, you just import your React component like normal, you can use it like normal, and then you can give it specific tags to tell when and if to load the JavaScript associated with it. So if you want a button where you want the functionality, you want to maintain pieces of state that React is pretty good with, you can say that you can add a tag for client:load, so load the JavaScript for this component when we load the page. Or even cooler, how cool is this? You can do client:visible to say only load this JavaScript when this thing is visible in the client. So if you have a comments component in your blog post, your blog post is really long, people don't read, let's be honest we don't read all the blog posts usually. So they don't get down to the comments component, that JavaScript never loads. It never loads, it's like it's never there because you only need it once you actually get there. So this is really, really cool.
So you can use any framework mostly that you want—React, View, Svelte, Lit, Preact, like all these things—and just bring that into this, which is just wildly cool.
Reason 5: The Islands Architecture
Now the last thing I want to mention is the last cool thing, which I think is kind of revolutionary. It's not only relevant to Astro, this is in other areas of frameworks as well, but I think this is kind of the future of how we think about loading JavaScript on the page. And this is the idea behind what we just saw, of only loading that React JavaScript when we get down to it, is this idea of islands.
So the Islands Architecture is basically your way of defining components inside of a page where only certain components need JavaScript. So you can have all of your, by default, no JavaScript components. So you'd load no JavaScript and you opt in for JavaScript for very specific components, which then enables us or allows us to not load that until, like we just said, we get down to that component. Now we load the JavaScript or just have that JavaScript be loaded asynchronously, so your website will load super, super fast. It will be there and it will add in the JavaScript functionality as it's available.
Let me scroll down to, let's see, the Islands Architecture. So zero JavaScript runtime. It renders HTML on the server and strips away any remaining unused JavaScript. So by default, then the power of islands, if you need that interactive UI, if you want to load individual non-blocking, you can load individual non-blocking components, component islands in parallel. So you can load those in parallel, they're not going to affect the initial render of the page and they'll just kind of load in when they're ready. Then you can also do lazy-loading islands like we just said, components only hydrate when they scroll into view. If you don't see it, Astro won't load it. You can't really get more flexibility and more performance than what you get out of a framework like Astro for all the benefits that we've talked about.
Conclusion
So I am super stoked about Astro. I am working on migrating my blog. I was migrating to Next.js, now I'm just doing it in Astro because I tried it one day and I was like, this is going to be the thing. I'm super excited about Astro. Those are my top five reasons that I'm super excited about it. There's more, but those are five. Let me know what you think about Astro, if you've tried it, if you have any things that you're particularly excited about, or more importantly maybe, if you think there's anything missing from Astro that you would like to see. Let me know, I'd love to have that discussion in the comments below. Anyways, I hope you enjoyed the video, I hope you're as excited about Astro as I am, and I'll catch you in the next one.
