Astro, islands & my blog

Some time ago I started to think about creating my own technical blog. One of the biggest problems was choosing a tool with which the platform would be created. On the market there as many of them - Wordpress, Gatsby, Next.js, Jekyll, Hugo are only a few of the most popular technologies. Each of them has pros and cons and it was difficult to select one. Then I came across a very interesting article in one of the newsletters. It was about a new (another) frontend framework. What was interesting is the fact that this new tool is a static-site generator which is the perfect choice for a blogging tool. I started to read more about it, digging into all of the features it provides, and finally decided that it’s a perfect tool for me. I give it a try and I don’t regret it at all. This tool is Astro. Let me tell you more about it - how does it work, why do I think it’s super cool and why you should give it a try!

Astro is a meta-framework and static site builder which was developed to create fast and content-focused websites. It uses Astro Islands which is a special implementation of Island architecture. The concept of Island architecture is very interesting and I strongly recommend reading it. It will give you additional context which will help understand how Astro works under the hood. To make a long story short, the main idea behind Astro Islands is to render interactive components separately among static HTML elements. By rendering islands (an island is Astro’s term for interactive components) in parallel and hydrating them in isolation the page speed is increasing. Components don’t have to wait for others to render and don’t block each other.

Let’s quickly look at the basic structure of the Astro component. It consists of two main sections - Component Script and Component Template. The first one is executed only on the server side and allows you to write JavaScript code. The second one allows you to write JSX-like expressions (Astro has its template language which is a superset of JSX). They are separated by three dashes --- which are called a code fence.

What’s important is the fact that Astro (by default) generates a website with no client-side JavaScript. It also progressively loads only those components that are needed at the moment e.g. during the initial load, only those components that are visible in the viewport will be rendered. What’s more, you can directly describe how Astro should render its islands - if it should be only on the client/server side, what is the priority during loading or if it loads when certain CSS criteria are met. It is possible by using these five directives:

• client:load - load and hydrate a component as soon as possible
• client:idle - load and hydrate a component after the initial load is done
• client:visible - load and hydrate a component after it is visible in the viewport
• client:media - load and hydrate a component only if CSS media query criterias are met
• client:only - omits the server rendering, and renders the component only on the client side.

For me, there is a particular feature that is super exciting. It’s a fact that Astro provides first-class support for many popular frontend frameworks & libraries. In other words - in Astro, you can use code written in React, Vue, Angular, Preact, Svelte, Solid, and many more. The only thing you have to do is to install a specific plugin and that’s it! It’s amazing how easily you’re able to integrate different components into your app. All of that is possible because Astro renders all the components to HTML at the build time and then strips out all of the JavaScript. So no matter what combination of frontend tools you’ll use. It all ends up as static HTML code.

Astro is great when it comes to SEO but it shouldn’t be surprising since the code is statically generating. Pages built that way are blazingly fast because they’re prebuilt on the server and don’t have to be generated every time user makes a request. Having all of the code compiled to HTML results also in being more friendly for web crawlers. All of that means that your page will be ranked higher in search results. Astro is SEO-friendly out of the box. These are the Lighthouse metrics that I was able to get almost out of the box after a few moments of work:

What I also like about Astro is its approach to styling. By default, all of the styles are scoped. You simply write CSS in the components file and if you want to make it global (however, it’s not recommended) you can use a modifier is:global. There is also a possibility to style globally all of the children of your component. When you properly combine selectors and directives it becomes a powerful pattern for using CSS styles in your application. Here’s a simple example of how styling in Astro could look like:

To sum everything up - Astro is a great frontend framework that aims to be the best player in its field. To be honest I haven’t ever used a tool that is so easy to use out of the box and is very developer friendly. The entry level is low and you can achieve satisfactory results in a fairly short time. Of course, when you start digging and try to do more advanced work it’s going to be more complicated but that’s something good. It only means that Astro is a great choice for beginners and also more advanced engineers. I strongly recommend you try it and play with it a little. I hope you will find it as much fun as I do.