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.

Astro ships with ZERO JavaScript by default, making sites created in Astro super fast, because it means that it serves only static pages to the user, without any JS, which is well… the fastest way possible to serve a web page.

Now, this is great if you are building fully static site… but chances are you are not. And your site is going to need some of that JavaScript goodness for user interactions.

That is where Islands architecture comes in, with Astro you can easily create Islands of interactivity inside of your mainly static web page. And Astro is going to ship just those small parts of JavaScript to the client, either on page load, or if it’s further down the page, you can set it to load that JavaScript when the interactive island or component is visible.

Multiple frameworks

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.

Multi-Page Application

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.

However, traditional MPA frameworks would have you write a different language on the server (Ruby, PHP, etc.) and JavaScript on the browser. In Astro, you’re always just writing JavaScript, HTML and CSS. That way, you can render your UI components (like React and Svelte) on both the server and the client.

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.

SSR

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.

Editors

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.

https://youtrack.jetbrains.com/issue/WEB-52015/Astro-Language-Support#focus=Comments-27-5745973.0-0

Project structure

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. src with components layouts and 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 pages folder.

Components

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:

JavaScript part where you write your JS code, here you can import other components, components written in other frameworks, helper functions, you can write your own logic, define local variables, define props for your component and so on. So all your JavaScript goes here. This code is written inside code fences --- similar to frontmatter in Markdown files.

You need to keep in mind that Astro components render to HTML during build. Even if you run JavaScript code inside of your components, it will all run ahead of time, stripped from the final page that you send to your users.

There are ways to run code AS IS, if you need it, but you can read abut that in the docs.

Component template comes below the script part of component, you can write plain old HTML here. However Astro’s component template syntax also supports JavaScript expressions, imported components and special Astro directives.

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

Conclusion

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.