🚀 What is Astro framework
Learn what is the new Astro Framework and how it can help you build faster content-focused websites
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
What is Astro framework
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
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.
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.
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
- 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.
- Jason Miller and Addy Osmani
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.
--- // 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
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.
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.