We are in an era where we are constantly having new JS frameworks being release, bought and transferred from one company to another company. Just yesterday, Remix was bought by Shopify.

Today we will talk about one hot topic that has been going around: Astro framework.

This is a blog post made from talk Astro - What? Why? How? by Luka Batarelo  given at JavaScript Zagreb #56 meetup in Javascript Zagreb Group. We hope you enjoy as much as they have enjoyed organizing and creating the meetup and talk ❤️

What is Astro framework

Astro is a tool for building static websites with your favorite JavaScript frameworks. Astro.js is an all in one web framework. You are able to create astronomically fast websites with Astro.js.

Astro.js uses a technique called partial hydration to automatically remove unused Javascript from your site, resulting in your clients receiving 90% or more Javascript code. Astro.js is the perfect choice for heavily content-focused websites such as ecommerce, marketing, and blogs.

Brief history of Astro

Astro.js started as a simple technical experiment in March 2021, making it a relatively new project. The original intent was suppose to be a simple static site generator and it was considered a "people's project". The core team involved simply 4 people (today it is more than 12 people).

Core design principles of Astro

The Astro.js team in the beginning wanted to have a community built around the important 5 principles of what makes Astro.js today. Here are them:

1. Content focused

Astro was designed for building content-rich websites. Websites such as ecommerce, marketing websites, publishing sites (journals and newspapers), blogs and portfolios should highly benefit from Astro.js.

Most web frameworks were designed for building highly enriched web applications. These frameworks - VueJS, React, Svelte - focus on building much more complex application-like experiences in the browser such as logged in admin dashboards, inboxes (email), social networks and even native-like applications like Figma.

This is an extremely important difference between Astro and other frameworks. Astro focus on content which gives it an important edge on delivering unmatched performance features that wouldn't make sense for most of the application-focused web frameworks to implement.

2. Server first

Astro focus on server side rendering over client-side as much as possible. The idea is to perform the same as server-side frameworks - PHP, WordPress, Laravel, Ruby on Rails, etc. - have been using for years. But it won't be necessary from you to learn a second language to unlock this powerful concept. With Astro, your whole app is just HTML, CSS and Javascript (or Typescript, if you prefer).

Modern Javascript frameworks such as VueJS, Next.JS and many other requires the client-side rendering of your entire application and include server-side rendering mainly to address performance concerns. This approach is usually called Single Page Application (SPA) which is completely the opposite of Astro's Multi Page Application (MPA) approach.

The SPA model has its benefits but these has trade-offs. These trade-offs harm page performance, including extremely important metrics such as Time to Interact (TTI), which doesn't make much sense for content-focused websites which the first load performance is essential.

3. Fast by default

It should be nearly impossible to build a slow website with Astro. Overall, good performance is important, but for content-focused websites, it is even more important than native-like web applications. Pinterest's study showed that making their web application 40% faster, lead to 15% more sign-ups. BBC on the other hand, showed that each 1 second extra their website took to load, they lost 10% of sign-ups.

It is easy to build websites that looks gorgeous and fast in development but whenever it is deployed to production, it looks terrible and slow. Javascript usually is the culprit, since users phones and lower-powered devices are usually never in match with a developer's machine.

An Astro website can load 40% faster with 90% less Javascript than the same website built with React framework. Don't take our word for it, see how Ryan Carniato (creator of Solid.js and Marko) was speechless as he sees the PageSpeed Insights for a website built with Astro.

4. Easy to use

Astro’s goal is to be accessible to every web developer. Astro was developed to be approached, either by a senior or  junior developer, making it easy to build an application, no matter the experience in the past of the developer.

Astro was designed to be much less complex than other Javascript frameworks as it runs on the server, therefore no browser is involved. That means that all the complexities of hooks (React), observables (Svelte), stale closures (React), refs (Vue) and many more is no longer a concern. The server has no reactivity, therefore these complexities can be stripped away.

One of our favorite sayings is: opt-in to complexity. We designed Astro to remove as much “required complexity” as possible from the developer experience, especially as you onboard for the first time. You can build a “Hello World” example website in Astro with just HTML and CSS. Then, when you need to build something more powerful, you can incrementally reach for new features and APIs as you go.
- Astro Docs

5. Fully featured

Astro is an all-in-one web framework that comes with everything you need to build a website. Astro includes:

• File based routing
• Asset handling
• Build process
• Component syntax
• Bundling
• Optimizations
• Data fetching
• Many more

You can build great websites without ever needing any feature outside of Astro's core. In case that you need something more complex, you can extend Astro with integrations such as React, Svelte, Vue, Tailwind CSS, MDX, Imagine Optimizations and many more.

Astro is a UI-agnostic framework, which means that you can Bring Your Own UI Frameowork (BYOF). Vue, Svelte, Solid and React are all officially supported in Astro. Mixing and matching different frameworks on the same page won't be a problem, as Astro oficially supports it, giving you the power to make future integrations a breeze - therefore, avoiding being locked-in to a single framework.

Why is Astro fast

Astro makes it possible implementing a new concept called partial hydration.

Partial rehydration has proven difficult to implement. This approach is an extension of the idea of progressive rehydration, where the individual pieces (components / views / trees) to be progressively rehydrated are analyzed and those with little interactivity or no reactivity are identified.

For each of these mostly-static parts, the corresponding JavaScript code is then transformed into inert references and decorative functionality, reducing their client-side footprint to near-zero.

- Jason Miller and Addy Osmani

Astro Islands

Astro islands (aka Component Islands) is a pattern pioneered by Astro in web architecture. The term "Astro Islands" refers to an interact UI component on a static page of HTML. There can be multiple islands on a page, and an island will always render in isolation.

In Astro, you may use any framework that is supported (React, Vue, Svelte, etc..) to render islands in the browser. You can pick your favorite framework or you can mix different frameworks in the same page. Imagine two teams working on different frameworks but in the same app.

This technique is built on top of an architectural pattern known as partial or selective hydration. Behind the scenes, Astro leverages this technique to power your islands automatically.

The best part of Astro Islands? It ships ZERO client-side Javascript, by default.

---
// Example: Use a static React component on the page, without JavaScript.
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- 100% HTML, Zero JavaScript loaded on the page! -->
<MyReactComponent />

Sometimes client-side Javascript will be necessary to create interactive UI. Instead of forcing your entire page to be SPA-like Javascript applications, you can ask Astro to create an island.

---
// Example: Use a dynamic React component on the page.
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- This component is now interactive on the page! 
     The rest of your website remains static and zero JS. -->
<MyReactComponent client:load />

With this approach, the vast majority of your website stays pure, lightweight HTML and CSS. In the example above, you have added a single, isolated island of interactivity without changing the rest of the page.

What is the advantages of Astro

The most important point for building any content-focused app with Astro is the performance boost your application will receive. The grand majority of your application is converted to fast, static HTML and Javascript is loaded only for component that will need it. Javascript is one of the slowest assets that you can load per-byte, so every byte that you can save counts.

Other huge benefit is the power of parallel loading. In the example above, the low-priority "image carousel" island doesn't need to block the high-priority "header" island. The two load islands load in parallel and hydrate in isolation, meaning that the page becomes interactive as soon as it is loaded without having to wait for the heavier carousel to finish being interactive.

The best part? You can even tell Astro exactly how to render a component. If the "image carousel" is really expensive to load, you can attach the client:load directive to it and it will only load when the user is about to see this component. If the user never sees it, it will never load.

Astro is a tool for building static websites with your favorite JavaScript frameworks. Astro.js is an all in one web framework. You are able to create astronomically fast websites with Astro.js.

In case you are building a content-focused website, we highly recommend you give Astro a try. You will be able to see performance improvements that are out of this world.