Updated

Published

Astro 2.0 Release

Astro's 2.0 release comes with some great new features and improvements.

Astro's Logo

Astro 2.0 was released on January 24th. Astro is an up-and-coming framework that powers this blog and many other content-focused sites. It is a crazy fast framework that allows you to use your favorite frameworks while also shipping less JavaScript to the user.

The 2.0 release comes only months after their 1.0 release. The Astro team has been hard at work with several new features and improvements.

Let’s take a quick look at all their hard work!

New Features

A screenshot of the TypesScript code needed to define Astro's content collections.

Content Collections

The headlining feature in Astro 2.0 is Content Collections. What exactly is a Content Collection and how will it improve your content?

Content Collections are a way to validate the schema of a Markdown or MDX file. Say goodbye to misspelled and forgotten frontmatter fields. And say hello to Typescript types that make generating pages based on that content event easier.

With Content Collections, you aren’t locked into someone’s preconceived notion of a blog post. You aren’t even locked into using this for only one type of data. You can define collections for various different aspects of your site. For example, blog posts and products.

Read an overview of Content Collections on the Astro blog.

Hybrid Rendering

The next new feature in Astro 2.0 is Hybrid Rendering. Hybrid Rendering allows you to combine both static and server-side rendering. Use server side rendering when you need it and static when you don’t.

It is a simple one-liner to made a page build statically for a server-side rendered app. Just add export const prerender = true and the page in question will be rendered at build time.

This opens possibilities to add apis to a static site or improve render performance. Take a look at the Hybrid Rendering deep dive on the Astro blog for more details on how to use this new feature.

Updates

A side-by-side comparison of Astro's new and old errors. The Astro 1.0 errors are on the left and the Astro 2.0 errors are on the right.

In developer experience, Astro has greatly improved the errors that render when a page has an issue. They include helpful references to their docs and improved error messages.

It’s easier now to start debugging your problems. And the error messages just look great!

Astro 2.0 also brings performance improvements to the dev server. This includes some investment in improvements for the Hot Module Reloading that Astro supports.

Under the hood, this release of Astro also includes Vite 4.0. This version of Vite includes upstream patches from Astro team members. It is awesome to see projects collaborate together like this.

What’s Next?

A road cutting between trees in a forest.

Already hungry for Astro 3.0? We may have to wait a few months before that happens. But in the meantime, follow the Astro public roadmap. Curious about how features get added to Astro? Read all about it in their roadmap repo on GitHub.

Astro version 2.0 is a great time to get started with building sites in Astro. Start in their docs, or jump straight into playing with one of the Astro Themes (This site is loosely based on the AstroWind theme by onwidget).

Resources