> Canonical URL: https://codingcat.dev/podcast/3-7-Astro-2.0-with-Matthew-Phillips

# Astro 2.0 with Matthew Phillips

🎧 Podcast Episode · S3E7March 1, 2023[Astro](/topic/astro)

# Astro 2.0 with Matthew Phillips

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/cc425b6346b3a804a920d5f90b51f9584921748e-1920x1080.jpg?w=1920&h=1080&q=82&fit=max&auto=format)[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Matthew Phillips](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/09db48512d85ef8b26ac66ae5d6b96bb2fd72b9b-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Matthew Phillips](/guest/matthew-phillips)🎧 Listen & Subscribe[Spotify](https://open.spotify.com/episode/2z0AQixxj4qTkGPXkvvUYJ)[Apple](https://podcasts.apple.com/us/podcast/3-7-effective-testing-using-cypress-io/id1491655542?i=1000607591600)[YouTube](https://youtu.be/HZp0IBNhqnY)[Pocket Casts](https://pca.st/episode/d9ff3707-1f53-4e34-b01b-8eb5d5fe74e6)[Castbox](https://castbox.fm/episode/id2508485-id585318735)[Castro](https://castro.fm/episode/L10yZV)[Overcast](https://overcast.fm/itunes1491655542)[RSS](https://anchor.fm/s/115b203c/podcast/rss)

## Episode Sponsors.

[![CodingCat.dev tutorial cover image](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/1564a576c0c19e1b857c9bfba3cfb6364e7af223-2400x1350.jpg?w=1920&q=82&fit=max&auto=format)Partner & Sponsor

### Storyblok

Have you already discovered Storyblok? They have an official Svelte SDK! 74,000 + developers & marketers use it to deliver powerful content experiences on any frontend: Websites, eCommerce, mobile apps, AR/VR, or voice content!](https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast)✏️ Visual Architecture Diagram

## how this episode connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: Astro 2.0 with Matthew Phillips✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Astro 2.0 with Matthew Phillips: start with Matthew Phillips, implement Architecture & Patterns, and ship to production.AAA Contrast Verified

**Astro 2.0 with Matthew Phillips ** is a CodingCat.dev podcast episode featuring Matthew Phillips alongside Brittney Postma focused on Astro, JavaScript, HTML. Matthew Phillips talks with Brittney all about the new features in Astro 2.0. Watch the full video breakdown on [**YouTube**](https://www.youtube.com/watch?v=HZp0IBNhqnY) or explore the architectural notes, chapters, and official documentation links below.

## 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? [Content Collections](https://docs.astro.build/en/guides/content-collections/)How does this help with type-safe markdown? Zod integration

- [Hybrid prerendering](https://docs.astro.build/en/guides/server-side-rendering/#hybrid-rendering)
- [Error Message Overlay](https://astro.build/blog/introducing-content-collections/)

- 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:

Copied! 🐾

```
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

Copied! 🐾

```

# {post.frontmatter.title}

```

## 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`

Copied! 🐾

```

```

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`:

Copied! 🐾

```
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:

Copied! 🐾

```
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:

Copied! 🐾

```
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:

Copied! 🐾

```
const posts = await Astro.glob('../posts/*.md');

	{' '}
	{posts.map((post) => {

- {post.data.title};
	})}

;
```

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](https://docs.astro.build/en/guides/migrate-to-astro-2/) 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/](https://docs.astro.build/en/guides/content-collections/)

Hybrid prerendering (aka prerendering): [https://docs.astro.build/en/guides/server-side-rendering/#hybrid-rendering](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/](https://astro.build/blog/introducing-content-collections/)

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/829fa49636fd3a69c0e8eb75bd69516ea54c4e2c-1500x643.png?w=1500&q=82&fit=max&auto=format)

## Video Chapters & Timestamps

Jump directly to any segment of [**Astro 2.0 with Matthew Phillips**](https://www.youtube.com/watch?v=HZp0IBNhqnY) on YouTube using the timestamped chapters below:

- [**00:00**](https://www.youtube.com/watch?v=HZp0IBNhqnY&t=0s): PM
- [**00:00**](https://www.youtube.com/watch?v=HZp0IBNhqnY&t=0s): Introduction
- [**00:00**](https://www.youtube.com/watch?v=HZp0IBNhqnY&t=0s): Getting Started with Astro
- [**00:00**](https://www.youtube.com/watch?v=HZp0IBNhqnY&t=0s): Astro Architecture
- [**00:00**](https://www.youtube.com/watch?v=HZp0IBNhqnY&t=0s): Astro 2.0 Changes
- [**00:00**](https://www.youtube.com/watch?v=HZp0IBNhqnY&t=0s): Content Collections
- [**00:00**](https://www.youtube.com/watch?v=HZp0IBNhqnY&t=0s): Server-side Rendering
- [**00:00**](https://www.youtube.com/watch?v=HZp0IBNhqnY&t=0s): Migration to Astro 2.0
- [**00:00**](https://www.youtube.com/watch?v=HZp0IBNhqnY&t=0s): Perfect Picks

## Resources, Links & Official Documentation

- **Watch on YouTube: ** [Astro 2.0 with Matthew Phillips Full Video](https://www.youtube.com/watch?v=HZp0IBNhqnY) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1))
- **storyblok.com: ** [https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast](https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast)
- **Show Pick: ** [The Last of Us (picked by Matthew Phillips)](https://www.hbo.com/the-last-of-us)
- [**Matthew Phillips Guest Profile & Episodes on CodingCat.dev**](/guest/matthew-phillips)
- [**Matthew Phillips on GitHub**](https://github.com/matthewp)
- [**Episode Sponsor: Storyblok**](https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast)
- [**Astro Documentation:**](https://docs.astro.build) Islands architecture, Content Collections, and zero-JS defaults
- [**MDN JavaScript Reference:**](https://developer.mozilla.org/en-US/docs/Web/JavaScript) ECMAScript specifications, Web APIs, and runtime fundamentals
- [**MDN HTML Reference:**](https://developer.mozilla.org/en-US/docs/Web/HTML) Semantic markup, accessibility attributes, and document structure

## Related CodingCat.dev Tutorials & Podcast Episodes

- [**Revealing all of Next.js 12's Features**](/podcast/1-46-revealing-all-of-next-js-12-s-features): We sit down with Lee Robinson, Head of Developer relations at Vercel, to talk all about Next.js 12.
- [**Breaking down Qwik with Shai Reznik**](/podcast/3-5-Breaking-down-Qwik-with-Shai-Reznik): Shai is the Qwik community lead and entertains Alex with his comic relief as well as why Qwik is changing the web development space.
- [**Building in CodeSandbox with Adewale "Ace" Abati**](/podcast/2-36-Building-in-CodeSandbox-with-Adewale-Ace-Abati): Adewale “Ace” Abita, shows us how to use CodeSandbox to improve your developer experience and collaboration.

## Frequently Asked Questions (FAQ)

### What are the main takeaways from Astro 2.0 with Matthew Phillips?

Matthew Phillips talks with Brittney all about the new features in Astro 2.0. 3.7 - Astro 2.0 with Matthew Phillips: Matthew Phillips talks with Brittney all about the new features in Astro 2.0. https://codingcat.dev/podcast/3-7-Astro-2.0-with-Matthew-Phillips Sponsors: Storyblok
Have you already discovered Storyblok? They have an official Svelte SDK! 74,000 + developers & marketers use it to deliver powerful c Throughout this podcast, Matthew Phillips breaks down real-world implementation details for Astro, JavaScript, HTML so developers can apply these patterns directly in production.

### How do you implement Astro best practices in production?

When adopting Astro and JavaScript in a production stack, start by validating your configuration against the [**Astro Documentation**](https://docs.astro.build) (Islands architecture, Content Collections, and zero-JS defaults). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.

### Where can I watch the full Astro 2.0 with Matthew Phillips walkthrough and find related code resources?

You can watch the complete video session for [**Astro 2.0 with Matthew Phillips**](https://www.youtube.com/watch?v=HZp0IBNhqnY) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into Astro, check out our related guide: [**Revealing all of Next.js 12's Features**](/podcast/1-46-revealing-all-of-next-js-12-s-features).

## ✏️ Episode Summary

3.7 - Astro 2.0 with Matthew Phillips: Matthew Phillips talks with Brittney all about the new features in Astro 2.0.

https://codingcat.dev/podcast/3-7-Astro-2.0-with-Matthew-Phillips

Sponsors:

Storyblok
Have you already discovered Storyblok? They have an official Svelte SDK! 74,000 + developers & marketers use it to deliver powerful c

## episode picks.

### 🐾 Brittney Postma

- [Type-Safe Markdown](https://astro.build/blog/introducing-content-collections/)

### 🐾 Matthew Phillips

- [The Last of Us](https://www.hbo.com/the-last-of-us)

## recent episodes.

[All Episodes→](/podcasts)[![GenAI for Engineers, What](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/3e48f44739be2aabf3aaa805e51b3a6328979153-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming)November 19, 2025[AI & MCP Agents](/topic/ai)

### [GenAI for Engineers, What's Real, What's Not and What's Coming](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming)

Curious about GenAI for engineers? Learn what's real, what's not, and what's next in AI.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Balki Kodarapu](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/25fd44884e232394eb74b776fcec7e8d13330ca0-1060x794.png?rect=133,0,794,794&w=96&h=96&q=82&fit=max&auto=format)Balki Kodarapu](/guest/balki-kodarapu)[![How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/0beb99900f4c24e284df2dee3e2d740062c6ce96-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences)November 4, 2025[AI & MCP Agents](/topic/ai)

### [How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences)

Curious about OAuth, MCP servers, and building cool ChatGPT apps? Hear from Max of Stytch as we dive deep, break down the tech, and build a Tamagotchi together!

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Max Gerber](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/4497bb7ada0e39b4cd13b0e3ca00c930389dab02-1292x1088.png?rect=102,0,1088,1088&w=96&h=96&q=82&fit=max&auto=format)Max Gerber](/guest/max-gerber)