What's new in Astro 2.0?

Astro 1.0 introduced developers to a way of building applications optimised to reduce excess Javascript in an application by introducing us to Astro Islands, representing a paradigm shift for frontend web architecture.

This shift allows people to build static Pages and implement "Islands" of dynamic behaviour using frameworks you were already familiar with, like React, Vue, and Preact ...

This shift brought ASTROnomical (Pun intended) improvements to the performance of your application as the Unused JavaScript got replaced with lightweight HTML, which meant faster loads and time-to-interactive (TTI).

The use case of Astro spans E-commerce and blogs. As you can imagine, the list keeps growing.

So... Astro 2.0?

Collection API

Since a lot of the content coming into websites these days are static coming from a content management system (CMS) or Markdown or MDX, Astro has added a Collection API which allows you to manage collections of extended markdown files in a Type-safe way!

If you are familiar with Typescript's data inference, you can now get that in Astro powered by zod, which is a Typescript validation library.The src/content directory allows you to group together markdown files and access them from within your application.

Learn more about the Content API in the documentation

Hybrid rendering..

When building applications you often have to make the decision between static (SSG) and server (SSR) build output.

What if... ? What if you could enable server side rendering and static site generation on a per route bases??

Well now you can with Astro 2.0!! This means Improve render performance of popular pages and performance improvements with builds.

You can now pre-render certain pages without giving up your
deployed server. Pre-rendering builds pages ahead-of-time so
that all of those requests load instantly.

Improved Error messaging

Astro 2.0 provides better error messaging, you know.. the type that is helpful and doesn't make you want to do this:

It's so much better, because it points out exactly what's wrong.

Matthew Phillips

@matthewcp

On the DX side, @_princesseuh spent a lot of time rearchitecting how error messages work in Astro. Now errors in Astro are *typed*, which means you get better overlays when errors occur that includes ...

18:56 PM - 24 Jan 2023

Other Improvements

There have been improvements to the Hot module reload(HMR) of Astro, and it also now supports some Vite 4.0 improvements.

Astro also officially launch the new Public Roadmap for Astro. So now you can see all the things the team is up to!

You can start testing these new features today by running npm i astro@latest to upgrade an existing project. If you don't have an existing project, you can start a new project locally or on an Online development environment like Codesandbox.

Codesandbox has automatic Language syntax support for Astro and is a really seemless way to build applications without setting things up locally as it is powered by micro VMs

Check out the Astro starter running 2.0 already: https://codesandbox.io/p/sandbox/astro-j1qiqf

In a follow up blog post I'll be sharing a project using Astro 2.0!

Happy coding!