I've seen the Astro framework being named around quite a lot. Whether that be from Stack Overflow, Reddit, or even content creators such as Kevin Powell, there's hype for this newer but powerful framework.
Just what is Astro?
Astro is a framework used to build content-focused websites. Astro advertises themselves as a framework designed for speed and can be adapted with any supported UI component and libraries. What does this mean? It means that as a developer, you get full control over what libraries and front-end languages you may choose to use under Astro as your framework. Navigation bar in React? Card component in Vue? Button in Svelte? Astro allows it!
Key Features
According to their documentation, Astro as a framework lists several key features:
- Content-focused
- Server-first
- Fast by default
- Easy to use
- Fully-featured, but flexible
Content focused
At its core, Astro is first and foremost a framework built to deliver rich amounts of content to your audiences. By content, think marketing sites, images, documentations, blogs (like this one!), portfolios, eCommerce and more! If your use case falls within one of these examples of content, then Astro may be a suitable framework to take a look into.
Server-first
Astro is a framework utilizes server-side rendering (SSR) over client-side rendering (CSR) as much as possible (perhaps I'll make a post about the various rendering methods in the future). This kind of rendering has been used for quite awhile and dates back to more traditional server-side frameworks such as PHP and Ruby On Rails but do not underestimate it! Because Astro is built utilizing a Multi Page App (MPA) approach, there are less tradeoffs when it comes to performance, which is essentially when serving content to your audiences.
Fast by default
Presenting content means you should be delivering them as fast as possible. Astro shines in this department as Astro is built on the foundation of delivering content with a server-first MPA architecture. There is no JavaScript sent to the client by default. This results in amazingly fast websites out of the box.
Our goal: It should be nearly impossible to build a slow website with Astro.
Easy to use
When I say easy to use, it is definitely easy to use. It reminds me of other frameworks and build tools like NextJS, Vite, Create React App, etc. Why is it easy to use?
Astro’s goal is to be accessible to every web developer. Astro was designed to feel familiar and approachable regardless of skill level or past experience with web development.
As a developer who tried out and built sites using Astro, I get quite the flexibility in terms of project structure and app structure. There isn't any one opinionated way of building an Astro site and whatever way works for you, there are no tradeoffs in performance when building with Astro. You could build your sites with good ol' Vanilla JavaScript if you really wanted to!
Fully-featured, but flexible
Despite having many features out of the boss, you can definitely extend Astro to fit your needs better. They present over 100+ integrations that allow you to extend the functionality of Astro to your needs. Be sure to take a look when building since they have some essential integrations such as one for Tailwind.
I am sold! How do I get started?
Head out to the Astro site and you'll immediately come across the command to create your Astro site, assuming your build tool is npm:
npm create astro@latest
The installation process presents several questions that allows you to customize it.
Once it's done, you can simply head over to your newly created Astro project, run:
npm run dev
and get started immediately! It's as easy as that! You can create your project from Astro templates or you can start from scratch. Whatever you choose, it cannot get more simpler than that.
Conclusion
Astro is quite an interesting all-in-one web framework that focuses on delivering content at amazing speed. This results in a framework that delivers a satisfying developer experience while serving happy audiences their requested content. There's very little of a learning curve since Astro encourages you to bring whatever front-end knowledge you already know (such as Vue) to build your site ontop of the Astro framework with ease.
If you do need a place to start learning Astro however, I recommend their tutorial as they guide you step-by-step in creating a simple blog while teaching the fundamentals of Astro.
No wonder Astro has been gaining quite a bit of traction lately and I am all for it!