Astro 2.0 with Matthew Phillips

Posted: 3/1/2023

Questions

Can you tell us more about yourself?
How did you get involed with Astro?
Can you give a high level overview of what Astro is and why someone might use it?
What is new in Astro 2.0?
1. Content Collections
  1. How does this help with type-safe markdown? Zod integration
2. Hybrid prerendering
3. Error Message Overlay
What were the breaking changes and is there an easy migration path or command to help?

Welcome to Astro 2.0: A Deep Dive into the Latest Features

Introduction

Welcome back to another episode of the CodingCat Dev podcast! Unfortunately Alex Patterson can’t join us today, but I’m thrilled to have Matthew Phillips here as our special guest co-host. Matthew has been involved with front-end development and tooling for around 10 years now and previously worked on open source projects like CanJS. More recently, he was hired by Fred K. Schott (founder of Astro) to work at his company Skypack. This eventually led to Matthew being part of the core Astro team!

In this post, Matthew and I will be taking a deep dive into all the new features and changes introduced in Astro 2.0. There’s a lot to cover so let’s get started!

Creating an Astro Project

To create a new Astro project, simply run:

npm init astro@latest

Then pass in --template to select a starter template. For this demo, Matthew uses the blog template which includes some default pages and content to get up and running quickly.

Once installed, the project structure contains:

A src folder
A pages folder for routing
Astro, Markdown, and MDX pages
Components like BaseHead

Astro pages allow you to define the entire HTML structure in the file. This gives you full control compared to frameworks where you focus more on components and layouts.

Layouts in Astro are used like components. For example, the post.astro layout injects the blog post content into the correct spots.

post.astro

<html>
	<head></head>

	<body>
		<header>
			<h1>{post.frontmatter.title}</h1>
		</header>
		<article>
			<slot />
		</article>
	</body>
</html>

Islands Architecture

One powerful concept in Astro is islands. This allows you to mix and match Astro and framework components on a page.

To use a React, Svelte, etc component as an island, import it and add client: before it:

Page.astro

<client:Counter />

This tells Astro to hydrate the component on the client-side. Different directives control when and how it loads:

client:load - Loads on pageload
client:idle - Loads when CPU is idle
client:visible - Loads when scrolled into view

Islands allow using the component model with Astro’s static generation and HTML-focused approach. Astro handles loading the necessary JavaScript for you.

Server-side Rendering

Astro originally launched as a static site generator. But now in 2.0, it also supports server-side rendering!

To enable SSR, set output: 'server' in astro.config.mjs:

astro.config.mjsexport default {// ...output: 'server'}

The goal is that developing in Astro feels the same no matter the output. You can start with static generation, then switch to SSR later by just changing that config value!

The key difference is that dynamic routes with getStaticPaths only work in static site generation mode. This lets Astro know all the pages to build at compile time.

Page Pre-rendering

Though Astro now supports SSR, you may want specific pages to be statically generated, like a marketing homepage.

2.0 introduced page pre-rendering to handle this. For any Astro page, add:

Page.astroexport const prerender = true

When built, this page will be statically generated as HTML instead of using a serverless function.

Pre-rendering allows parts of a site to be SSR while keeping important pages fast and static.

Content Collections

Content Collections provide a powerful way to manage and access markdown and MDX content.

In src/content, you can define a schema for a collection:

src/content/config.tsimport {defineCollection, z} from 'astro:content';
export const blog = defineCollection({schema: {title: z.string(),description: z.string(),

This adds:

Type checking and intellisense
Required fields
Automatic TypeScript interfaces
And more!

In pages, import the collection and access the data:

const posts = await Astro.glob('../posts/*.md');
<ul>
	{' '}
	{posts.map((post) => {
		<li>
			<a href={post.url}>{post.data.title}</a>
		</li>;
	})}
</ul>;

Overall, this leads to a much better developer experience than has been possible with Astro content in the past.

Astro 2.0 Migration

There weren’t a ton of major breaking changes in 2.0:

Upgraded to Vue 3
Dropped Node 14 support
Some legacy APIs removed
Minor changes like output directory

Most upgrades should be painless. And the Astro team has been quick to release bugfix patches like 2.0.5, 2.1, etc.

If you encounter any issues, the Astro 2.0 Migration Guide covers everything in detail. Feel free to also raise questions in the GitHub discussions!

Conclusion

That wraps up this whirlwind tour of Astro 2.0! Some key takeaways:

Powerful new islands architecture
Support for server-side rendering
Page pre-rendering
Content Collections to manage Markdown/MDX
And more!

Huge thanks to Matthew for explaining all the great new capabilities. The progress that Astro has made with such a small team is truly impressive. I’m excited to see where Astro goes next after this major release!

What are your thoughts on Astro 2.0? Let me know in the comments!

Useful Links

Content Collections: https://docs.astro.build/en/guides/content-collections/

Hybrid prerendering (aka prerendering): https://docs.astro.build/en/guides/server-side-rendering/#hybrid-rendering

New error message overlay (there’s a screenshot in this article): https://astro.build/blog/introducing-content-collections/

Untitled

Guest Picks

Matthew Phillips

The Last of Us

Host Picks

Brittney Postma

Type-Safe Markdown