“Astro has several unique features that all stem from its focus on content-orien...

“Astro has several unique features that all stem from its focus on content-oriented websites.”

Lately, a modern static site builder called Astro has been generating a lot of buzz for challenging the JavaScript ecosystem. We spoke with Matthew Phillips, a core member of the Astro team, about the problems the builder solves, its distinctive features, and the technology and team behind it.

devm.io: Could you please tell our readers a bit about your background and what you do?

Matthew Phillips: I'm Matthew Phillips, an engineer specialising in developer tools. For most of my career, I've worked in and around tools that help you build websites. At my previous job with Bitovi, I maintained CanJS and DoneJS, among other projects.

I've also long built my own open-source projects as well, such as Haunted, Robot, and Lucy.

I joined The Astro Technology Company in 2020 to work on Skypack, the CDN for JavaScript modules. Soon we started talking about how to better integrate the ideas behind Skypack into local development of projects. Astro evolved out of those ideas.

devm.io: Astro has recently generated a lot of interest. What exactly is Astro and what problems does it solve?

Matthew Phillips: Astro is a website builder. It allows you to build websites using the familiar pattern of components. You can create components using your favourite frameworks like React and Svelte and then combine them together to build your pages.

Some call Astro a "meta-framework". This means that Astro handles server-rendering and client-side JavaScript for you. It is comparable to frameworks like Next.js and SvelteKit.

What makes Astro different is its focus on content-oriented websites. That is any website that mostly consists of displaying content such as blogs, documentation sites, and e-commerce. You can build an "app" in Astro but that's not our focus.

Astro solves the problem of providing the developer experience you get from SPA frameworks like Next.js but with better performance as needed for content sites.

Astro components are also friendly to beginners and have the same advantages as plain HTML.

devm.io: What is the technology behind Astro? What does it look like under the hood?

Matthew Phillips: Astro is built using a lot of interesting technologies. From a user's perspective, when you encounter Astro you'll be using:

• Node.js
• Styling tools such as PostCSS and Tailwind
• Components built with our own format, or any framework of your choice like React, Vue, Preact, Svelte, and Solid.js.
• Markdown

When you are ready to deploy your website you can build your site to work on just about any static host, as well as SSR hosts like:

• Netlify
• Vercel
• Cloudflare
• Firebase

Internally Astro is built using TypeScript and Astro components are built on a Go-based compiler.

devm.io: Why should somebody choose to use Astro over some other solutions? What makes it unique?

Matthew Phillips: Astro has several unique features that all stem from its focus on content-oriented websites.

First, Astro renders to pure HTML by default, with no JavaScript unless the developer explicitly needs it. However, when JavaScript is needed the developer can add it using special attributes such as "client:load" and "client:visible", that tells Astro how and when to load the JS. This is how we implement islands architecture.

Secondly, Astro contains its own component format, .astro files, that have a focus on HTML compatibility with simple templating. Astro components are like HTML with JSX expressions inside, and logic that runs in the top of the file in a frontmatter section. Astro components only render to HTML and never to the client. This makes them easier to work with than framework components which serve multiple roles.

Astro components are also friendly to beginners and have the same advantages as plain HTML.

Lastly, when you do need client-side JS, Astro lets you use any framework of your choice. Our feeling is that there are advantages to all of the frameworks and since the client-side is not our job we leave it up to you to decide what works best.

We recently released Astro 1.0, which is our stable release that is a great starting point for new projects.

devm.io: Astro uses island approach and partial hydration. What does that mean?

Matthew Phillips: In a typical framework such as Next.js your app will render to HTML server-side, and then the entire thing is sent to the browser where it is hydrated (meaning rerun) over the existing HTML. This is the SPA (single-page app) strategy. For highly interactive apps such as chat applications this makes a lot of sense. But for content-oriented sites where a minority of your page is interactive, it leads to excess. The browser loads far more JavaScript than is actually needed, slowing down the time to which your users can use the site.

In an islands approach you instead only hydrate the parts of the page that need to be interactive. Think about things like a Buy button which contains an animation on click. Or a light mode / dark mode toggle button.

Partial hydration means to only hydrate portions of the page. Islands refers to the components that get hydrated and (mostly) live in isolation of the other components.

Partial hydration is the what, the strategy, and islands architecture is the how.

devm.io: How many people are on the core team? How has the reception been to Astro since launch? How big is your community?

Matthew Phillips: Astro's core team has expanded quite a bit in the last six months. We currently have 12 people as part of the core team, which includes contributors to the development of Astro, to documentation, and to community outreach and support.

Astro had almost instant success and our community is a large part of why we've been successful. We have one of the friendlier communities I've ever encountered online. Today we're at over 6k members in our Discord with between 1 - 1.5k online at any given time. There are always people chatting on our Discord; sometimes I get up in the middle of the night and read what people are saying.

devm.io: Are there any Astro success stories you could share with us?

Matthew Phillips: There are so many it's hard to pick just one! Recently the Firebase development blog migrated to Astro with great success. Daily Dev Tips (https://daily-dev-tips.com/) is a great blog with daily tips on all aspects of development. Check out our Showcase page to see all of the great sites built on Astro: https://astro.build/showcase/.

devm.io: A new version of Astro has recently been released. What’s new in Astro 1.0?

Matthew Phillips: We recently released Astro 1.0, which is our stable release that is a great starting point for new projects. 1.0 was mostly about stabilising our APIs and providing a foundation that apps could rely on.

Among new features that came along with the 1.0 release are:

• A new image component that allows you to optimise images for your site.
• Official support for MDX; you can use MDX for any of your pages and partially hydrate components.
• SSR support (server-side rendering) exited beta and is now stable.

devm.io: What’s next on the Astro roadmap?

Matthew Phillips: With 1.0, we've seen an influx of new users, so we are actively monitoring pain points in order to figure out what to work on next. Some of the things we've heard people ask for the most includes:

• Incremental static rendering, to allow building a site to SSG but regenerating only pages that have changed.
• Mixed SSG and SSR mode, to pick individual pages that need SSR support while leaving the rest to build to static HTML.
• SPA-like routing when you need it.

But it's still to be determined what we work on! People should join our Discord and come to our RFC calls to talk about what Astro should focus on next.

devm.io: How can one get started with Astro? Do you have any tips for developers just getting started?

Matthew Phillips: Astro has excellent documentation, thanks to a large diverse group of docs contributors. The docs website has great instructions on getting started: https://docs.astro.build/en/getting-started/.

And once you hit your first roadblock (or before!) please join our Discord at https://astro.build/chat.

devm.io: If someone wants to contribute to Astro, how can they get involved?

Matthew Phillips: Our Discord is the best place. We have channels for every part of Astro development and teams formed around many of them, such as Astro core development, documentation, internalisation of the docs, and images.