Astro is, you would never believe, a new JavaScript framework. There are a whole bunch of JavaScript frameworks out there, so you might ask yourself – ‘Why would I even be interested in just one in a row?’ But, let’s see what Astro can offer.

Astro is hot new stuff in the world of web development. It is an MPA (multi-page application) framework that loads apps with 0kb of JavaScript. Basically, it tries to offer an experience of using some modern framework like Next.js but with the performance of traditional MPAs. It gives you the opportunity to control when you will load your JavaScript code through islands architecture. But not just that! Astro offers you an opportunity to combine multiple frameworks inside one application. How interesting it can get! If we got your attention, let’s deep dive into it.

How did it all start & Astro at the moment

Astro was a result of a technical experiment where its core team tried to combine multiple frameworks inside one application. So, for example, they wanted to combine React and Vue components together. Guess what? They were successful.

In the beginning, there were just 4 people in Astro’s core team but now there are 12 people already. A fun fact is that the initial commit was done in March 2021 and they already have more than 21000 stars on GitHub. For more information about source code and GitHub repo, visit withastro GitHub repo.

Most of the features and improvements are done by Astro’s community. They have a pretty huge community that is always here to help. Also, bugs and errors are solved pretty quickly in general.

At the moment, Astro aims to be a static site generator. Its aim is to let you build astronomically fast websites. In other words, its goal is to reduce loading time when a user visits your webpage and make it interactive as soon as possible. 

What may be interesting is that it uses JavaScript on the frontend part as well as on the backend part. That is one of the differences between Astro and other MPA frameworks. Let’s dive now into core design principles and core features.

Core design principles and features

Content focused

Astro is mainly content-focused at the moment. What does that actually mean? It means that you should use Astro for content-rich websites such as blogs, simple e-commerce websites, or something like that. That is where Astro shines.

Server-first

Astro supports SSR (server-side rendering). It does everything it can on the server and serves you already generated content or at least generated parts of the content.
.astro files can fetch remote data at build time. It means that users will see your webpage quicker than fetching on the client.

Fast by default

Astro applications and websites are fast by default because they ship code without JavaScript by default unless you change it. It means that if you create, for example, React component with some event listeners glued to it, your component will be shipped without those event listeners and will not have any interaction with the user. Astro will actually turn your component into basic HTML and CSS unless you decide differently. And that is an awesome feature. You can have complete control over every single aspect of your application.

Easy to use

Probably the best thing about Astro is that you don’t even have to use Astro components. You can write the whole application using technologies that you already know. And that is the biggest Astro advantage. You can use whatever you are comfortable with and let Astro take care of your application under the hood.

On the other hand, if you want to use Astro components, the syntax is pretty similar to modern frameworks. You write basic HTML with kebab-case attributes instead of camelCase which is used inside modern frameworks. HTML comments are valid inside Astro components. You are encouraged to use Typescript (if you want to learn what is Typescript, visit this link). You can type all the styles within the <style> tag and Astro will stick all the styles just to your component and prevent your styles from affecting some other component.

Fully featured

It has lots and lots of integrations that are ready to use. You can use almost all modern frameworks like React, Vue, and others. Before using them, you just need to add them to your application. It is as simple as this one-liner (in this example I want to add React to my application):

npx astro add react

Besides JavaScript frameworks, you can add modern CSS frameworks and libraries like Tailwind CSS, Sass, Less, or similar. For deploying services you can use almost every popular hosting service like Netlify, Vercel, AWS, Azure, or similar.

Markdown is supported by default while there is also MDX support.

It also dynamically creates static routes. It means that you name your new page in the pages folder and Astro will create that route for you.

Astro islands (islands architecture)

Islands architecture is a new term used to describe a different way of loading JavaScript on web pages than it used to be. The general idea of islands architecture is relatively simple. It renders HTML on the server and makes slots around highly dynamic regions. What does this actually mean? It means that your user will get a server-rendered page to his browser and there will be a dedicated place on the webpage reserved for loading your JavaScript code there. Those regions or slots are treated as self-contained widgets or, in other words, small, separated applications. Maybe it is easier to understand if you take a look at the picture below:

How does Astro use it?

Astro basically ships your code without JavaScript. So, if you make your super interactive React component, Astro will ship just HTML and CSS (in order to ship less code) and disable the whole interactivity unless you enable it. And that is where partial hydration comes into the story.

Partial hydration

Islands architecture and partial hydration are the core features of Astro. But, wait. What is hydration? Hydration is adding interaction to your HTML code. In other words, adding JavaScript to that code and making it “hydrated”.

The best thing about Astro is that you have full control over timing when you would like to make your code interactive, that is when you would like to load JavaScript code.

You can control it using tags on your components. Let’s see a few examples:

<MyComponent client:load /> – loads JavaScript together with HTML

<MyComponent client:idle /> – loads JavaScript when browser is “chilling” and has no other tasks to do

<MyComponent client:visible /> – loads JavaScript only when visible to the user

<MyComponent client:media /> – loads JavaScript only for specific screen width (for different devices)
<MyComponent client:only /> – only client side rendering

And that is how you can control all behavior of your webpage. Let’s now see how you can start using Astro and make your first project.

How can you start using Astro?

There are some prerequisites that you need to have in order to use it. Firstly, you need to install Node.js v14.18.0, v16.12.0, or higher on your computer. Secondly, you need some text editor like VS code. Finally, you need to know how to use Terminal on your computer.

Installing Astro is pretty simple. All you need to do is to position yourself in some folder where you want to make a new directory for your Astro application and run this command:

npm create astro@latest

When you went through the process of installation, position yourself inside of your application’s folder:

cd your-folder-name

When you are positioned there, you can run your application with this command:

npm run dev

And voila! You are running your first Astro application on localhost. And what now? At the moment your application doesn’t have any functionality except some links to its website, but now you can start building your first Astro application. Let’s see what you can combine there while creating your application.

What technologies does Astro support?

It supports a whole bunch of stuff so you can use pretty much every popular JavaScript framework, CSS framework, Node.js, Deno…

Astro doesn’t want you to learn completely new syntax that takes time to get into. Astro wants you to continue using whatever you are using right now, but let Astro take care of your application under the hood. 

So, if you are using React, it’s fine as well as Svelte, Vue, Preact, or something else. If you style your apps using Tailwind CSS it’s fine as well as using Sass or Less. Those choices inside the Astro framework are called integrations and you can see what else Astro supports on this link.

What is next from Astro? Does it have potential?

In the future, Astro’s first goal is to maintain a relationship with its community. It’s a people’s project and it will stay that way. The next goal is to support full SSR (server-side rendering) and compete with Remix or Next.js. The next one is to be as open as possible to continue using mostly open-source technologies.

If we consider everything said here, Astro has a huge potential to become a huge player. At the moment, I can freely say that Astro is the number one option for simple websites and for static site generation. It is stable in production and you can rely on it.

When they incorporate full server-side rendering into the framework, I think there will be no limit for Astro. At that point, it will give you literally an all-in-one experience and everything you need in order to build whatever you want except single-page applications.

Let’s see what the future brings us. 🙂