Why You Might Want to Try Astro

Posting your lighthouse score is a bit silly, but I had to for this one.

I didn’t know these scores were possible with React components… but they kind of are with another javascript framework named Astro. But Astro isn’t really like other frameworks. It’s more similar to a Ruby on Rails system than anything I’ve seen in the javascript ecosystem in the past few years.

It’s a MPA (Multi Page Application) style framework. I even used a library that’s default on Rails 7 now called ‘Turbo’. Do check it out. I got the idea from another builder’s blog here: link

Anyways this framework really does feel like Rails in a lot of ways. Without all the batteries Rails provides though. Let’s breakdown how it works and how to get that juicy lighthouse score.

Island Architecture

Astro’s islands renders raw HTML and lazy loads javascript so that we can get the best of both worlds. What’s more is Astro is framework agnostic: it doesn’t rely on a particular framework. Therefore you can use any type of component in its views.

At first I did think this was a gimmick. Why include the ability to have any framework? Why not just have an opinionated approach—-after all, many successful frameworks like Ruby on Rails or React are. However, what Astro introduces is a new paradigm, where we can combine the best parts of any framework. This truly looks like a futuristic type of system.

Custom API Routes

One thing that Astro does that was surprising was the fully custom api routes. It doesn’t seem to use express under the hood.

Coming from Nextjs and other express style frameworks this was jarring but, what I realized was the advantage of a non-express style server was it allows you to write code that can be run on edge-workers. This means we can optimize all of our functions for users closest to our application.

Edge First Framework

I’m not sure what kind of large-scale edge-first application you would write with Astro but hey, it’s a possibility. Certainly does make the future look bright for this tech.

Continuing though, the customization of the routes was interesting because it compelled me to write a lot of custom scripts. Image optimization, image downloading and csrf protection to name a few. If anything, learning to write a small app in Astro will probably make you a better programmer as everything is up to you.

And the best part? There’s really not a lot of boilerplate for you. Because the way they handle views with is simply amazing.

Consider the following:

<main>
	<slot />
</main>

We can write this component that wraps around something as a Layout. But what’s better is the ability to name slots, letting you put slots wherever you want. In my opinion this is far easier to understand than the uni-directional hierarchy of React components with {children}

<header>
	<slot name="first" />
</header>
<main>
	<slot name="second" />
</main>
<footer>
	<slot name="last" />
</footer>

Awesome right? Now we can simply slot our components wherever we want. By far a lot easier to digest than the crazy prop drilling you can get in React.

But Astro is still young and not exactly aimed for big production apps. Right now the ecosystem is very targeted towards seasoned developers and mostly static sites.

Here’s why you might not want to use it:

The Bad

• Limited SSR support
• Once in SSR mode, you can’t opt out on certain pages
• Multiple frameworks can be confusing
• Less documentation / bug reporting (for example, my site builds when deployed but not locally)
• Limited ecosystem
• State management requires dependencies, no out of the box solution

Overall, it’s an awesome experience and you should try it

Building my portfolio site with Astro was a joy and I really recommend checking it out. This is the perfect framework for a side-project. You can get up and going very fast, prototype ideas and then if you ever get huge and need to scale, there’s always more production ready frameworks.

Go try it out.