Why we use Astro

Steven Rapp
Jul 1, 2024
Hero image of Why we use Astro

Today I wanted to share a bit about Astro, which is what we use to build PriceLevel.

Astro is an open-source Javascript framework meant for building performant content-driven websites. The initial 1.0 release was in 2022, and while it’s not as widespread as some other frameworks, it has been steadily growing in popularity and positive sentiment.

What attracted me to Astro was the developer experience of building in a modern component-based framework while outputting zero-JavaScript static sites, with the ability to opt-in to client-side interactivity when and where you need it. It strikes a good balance of being sufficiently opinionated out-of-the-box to get you building fast, while providing the opportunities to customize it to your needs where appropriate, as we’ll see later on when I dive deeper into some of the features. 

What are we building at PriceLevel?

PriceLevel the company, is focused on building a movement of pricing transparency in SaaS, as my co-founder Christine has described

However, PriceLevel the site, is focused on providing that transparency through vendor-specific pages, pricing insights, and in the future, richer content to help you navigate the consideration, decision-making, and negotiation processes of purchasing software.  And while there’s some interactivity, like the ability for users to contribute pricing insights, we’re not really building an “app” or need rich interactivity like Figma - our focus is providing the data and content to help our users succeed.

So what do we need to make PriceLevel the site a success?

  • Speed of delivery - a must for any startup, the ability to quickly iterate on your product and experiment with confidence that you won’t break too much as you go.
  • Data-driven content - our data is the key resource from which our content (and value) is derived, so being able to work quickly with that data in many formats is important.
  • Be visible and findable - we can’t deliver on the promise of pricing transparency if users can’t find us and contribute their pricing insights, so the site must be built with SEO in mind.
  • Performant user experience - experience matters, and it starts with loading fast and being functional as soon as possible.

Borrowing this graph from the Astro home page. While benchmarks are sometimes questionable as a selling point of a framework, these numbers come from Google and are pretty impressive.
Borrowing this graph from the Astro home page. While benchmarks are sometimes questionable as a selling point of a framework, these numbers come from Google and are pretty impressive.

What makes Astro a good fit?

Astro’s touted as being a great option for marketing, online documentation, blogs, and e-commerce sites, so how does it line up with what we need for PriceLevel? Pretty well in my experience, let’s take a look:

Server first and performance driven

The purpose of Astro is to enable building performant content-driven sites and that’s clearly reflected in their framework’s functionality. By default, the framework’s build step takes your source and generates static, zero-Javascript HTML for you to deploy, leading to the quickest user experience.

For our use case, that’s a great fit, since we don’t need a lot of interactivity to share pricing insights. We simply rebuild pages when we have new contributions, so that the freshest data can be delivered quickly. And when we do need styles or client-side Javascript, they’re scoped and bundled smartly into just the pages that need them.

Built-in support for content

Astro comes with its own set of Content APIs, which enable type-safe access to datasets in a consistent way regardless of their source. Writing a blog article (like this one)? Store it as an mdx file in your repo. Have some tabulated data that you want to reference? You can store that as a JSON file - and the API to access that content remains the same throughout your application, making it easy to switch based on your needs.

There’s plugin support if you use a CMS, and you can reference other databases however you like. The Astro team recently announced they’re working on extending Astro’s Content API to cover those data sources too, so in the future these will start to look just like your other content (if you want them to).

In our case, we store all of our content into these collections. We use YAML for our structured data like category hierarchy and derived pricing insights and Markdown for all our rich content like blog posts.

Smart defaults and escape hatches

Astro comes configured out-of-the-box to build blazing fast static sites. But I found that if you want to make richer experiences and need something more, Astro makes it easy to do so.

Need to do some server-side rendering to customize a page’s content per user? You can opt into that functionality on a per page basis with a simple export statement, like on our contribution page. It smartly streams HTML content to the browser, so if you have a component near the bottom of your page powered by a hefty database call, it won’t block the rest of your page from rendering. Neat!

Want to include richer interactivity with a UI library? Astro’s islands architecture allows for you to render those components into specific sections of your site and gives you control over when to load them. We use this to render the account management dropdown in the header of each page based on whether you’re logged in.

If someone could explain the symbolism of the hatch from Lost, I'd really appreciate it
If someone could explain the symbolism of the hatch from Lost, I'd really appreciate it

Growing support and adoption

While still a relatively new framework (at least by Javascript standards), Astro’s foundation is built upon other mainstream libraries, such as Vite. It’s in active development, with solid documentation, and an active community. I mentioned earlier that it’s building in popularity, and the backing of Vercel, storyblok, Sentry, and sponsors helps to build my confidence in the project even further.

Significantly faster developer experience (for me)

This is the biggest selling point but also the most personal. I feel much more productive building in Astro than I did in other frameworks for a project like this. Astro comes with Typescript support by default, and with the installation of a VSCode plugin, it was easy to get Intellisense up and running.

The majority of my experience on the frontend is in React, but making components in Astro is very similar. They’re easy to build, compose together, and with Typescript support I can reuse and refactor them, confident that each is wired up correctly.

There’s a robust library of plugins and guides, making it easy to add Tailwind support, deploy to over 25 different infrastructures, handle form submissions, and much more.

Back to building

Astro has continued to be a good fit for PriceLevel - the best indicator of which is that we’re able to ship fast and not think much about what framework we’re using.

Instead, we focus on the value we can provide you, like finding you savings in your SaaS spend. If you’re interested in a free benchmarking of the services you pay for, let us know using the button below.

A visual sample of a completed benchmark report
Compare your SaaS spend
We offer free SaaS price benchmarking. We'll point out specific vendors where you can reduce your spend by several thousand.