Let's Checkout... Astro
In this video we are going to checkout Astro - all-in-one web framework for building fast, content-focused websites.
Although Astro just recently got its first stable release, there has been a lot of talk about it in the last year. It has gone from an empty repo to over 18,000 Github stars and 30,000 early users in the last 16 months, it has been deployed by companies like Google, Trivago, The Guardian and IKEA.
Obviously there is something good, if not great about Astro, so let’s check it out and see what all the fuss is about.
What is Astro?
Astro is an all-in-one web framework for building fast, content-focused websites.
This does not tells us much, so we will heave to dig deeper.
On the first glance Astro looks like a static site generator. And it technically is that, but it also has some features that makes it more than just a static site generator.
So let’s talk a bit about Astros key features to get a better understanding of what Astro does thats gotten it so much attention in the last few months.
Astro Islands Architecture
Key feature of Astro is that it uses Islands Architecture aka Component Islands.
Another feature of Astro is that you can use pretty much any UI framework or library you like with it, for creating your components.
You can even mix and match web frameworks if you are some kind of monster and have no regards for consistency… but you know, if that is your thing you can do it.
Astro officially supports React, Preact, Svelte, Vue, SolidJS, AlpineJS and Lit but you also have third party integrations for custom elements, Angular and even PHP.
Astro is a multipage application framework, which means that is similar to something like Ruby on Rails, Laravel or WordPress in the way it serves pages to the user. Those pages are usually rendered on the server.
The result is a developer experience that feels a lot like Next.js and other modern web frameworks, but with performance characteristics of a more traditional MPA site architecture.
You need to keep this in mind when choosing Astro as your framework of choice.
Because if you are building something like an application dashboard with a lot of shared state between pages and user interactions and don’t care about the SEO then Astro will not be a good fit for this use case.
But it’s a great solution for traditional websites, that are content focused and depend on speed and great SEO, with some user interactions sprinkled in.
Since Astro can communicate with the server, that means that you don’t have to just deploy static sites but you can use Astro as a server side rendering framework. You can do this using adapters, Astro supports Cloudflare, Deno, Netlify, Node.js and Vercel at the time of making this video, with more adapters to come later.
Community and integrations
And let’s not forget that even though Astro is a relatively new project it already has a great community with over 5000 developers and over a one hundred integrations.
Ok, so now that we have a general idea of what Astro is, let’s install it and try to build something with it.
To work with Astro it is best to use VS Code, by using official VS Code extension. But you also have community support for Nova Editor, Vim and Neovim.
Unfortunately at the time of making this video there is no real plugin for JetBrains IDEs like WebStorm or PHPStorm, which I’m using. However there is a workaround, that will at least give you code highlighting in JetBrains IDEs.
You can follow the instructions in this comment on JetBrains Issues page, the link will be in the description below.
Astros project structure is pretty basic, and if you used React, Vue, Next.js etc. this will all look very familiar to you.
There is a
public folder for your images and other assets.
pages. These are all pretty self explanatory, especially if you used Next.js since Astro also has file based routing just like Next. So all of your routes are defined as files inside
Main building blocks of Astro app are Astro components. And I don’t just mean components in the
components folder, but every file that has an
.astro extension is an Astro component.
Component structure is a mix of JSX, HTML, Vue components, Markdown files with frontmatter, but it also somehow manages to be its own thing.
There is a lot of things that you need to be aware about these components. And it would take a whole video just to cover all the ins and outs of Astro components, because they seem really powerful.
I will cover only the basics here, and you can learn the rest from the docs, which shouldn’t be a problem since Astro docs are one of the best that I’ve seen in a while, and you really should read them if you plan to use this framework.
Astro component is composed of three main parts:
There are ways to run code AS IS, if you need it, but you can read abut that in the docs.
You can use JSX like expressions here, like mapping over an array and displaying its values just like in React, but you need to keep in mind that although you can include dynamic values that are calculated in the script block, once included these values are not reactive and are not going to change.
And finally you have <style> block in which you can write your styles. These styles are scoped to the component by default. However, keep in mind that the styles are going to apply only to the content of the components template, children and any imported components will not be styled by default.
Astro seems very interesting, but at least for now I would just use it for mostly static sites that need some interactivity. I would need to try Server Side Rendering, and see how that works in Astro to make a final conclusion.
I also know that some people think that it’s problematic that Astro will fully load new pages when the links are clicked, like a traditional website, and it’s hard to share state between those full reloads. To me this is not a problem, because Astro is a content focused framework and it is not intended to be used like a Single Page Application. There are other tools for that if you need that sort of functionality. Although I’m sure that somebody will try to “fix” that problem sooner or later.
Of course there are many more Astro concepts that I could cover, if you are interested in that let me know down in the comments.
Wanna ask a question about video?
Like This Video?
Consider supporting me on Patreon.
...or you can share this video, that also helps ;)