You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/3-7-Astro-2.0-with-Matthew-Phillips/+page.md
5. What were the breaking changes and is there an easy migration path or command to help?
51
51
52
+
# Welcome to Astro 2.0: A Deep Dive into the Latest Features
53
+
54
+
## Introduction
55
+
56
+
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!
57
+
58
+
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!
59
+
60
+
## Creating an Astro Project
61
+
62
+
To create a new Astro project, simply run:
63
+
64
+
```sh
65
+
npm init astro@latest
66
+
```
67
+
68
+
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.
69
+
70
+
Once installed, the project structure contains:
71
+
72
+
- A `src` folder
73
+
- A `pages` folder for routing
74
+
- Astro, Markdown, and MDX pages
75
+
- Components like `BaseHead`
76
+
77
+
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.
78
+
79
+
Layouts in Astro are used like components. For example, the `post.astro` layout injects the blog post content into the correct spots.
80
+
81
+
post.astro
82
+
83
+
```html
84
+
<html>
85
+
<head></head>
86
+
87
+
<body>
88
+
<header>
89
+
<h1>{post.frontmatter.title}</h1>
90
+
</header>
91
+
<article>
92
+
<slot />
93
+
</article>
94
+
</body>
95
+
</html>
96
+
```
97
+
98
+
## Islands Architecture
99
+
100
+
One powerful concept in Astro is **islands**. This allows you to mix and match Astro and framework components on a page.
101
+
102
+
To use a React, Svelte, etc component as an island, import it and add `client:` before it:
103
+
104
+
```jsx
105
+
---// Page.astro---//...<client:Counter />//...
106
+
```
107
+
108
+
This tells Astro to hydrate the component on the client-side. Different directives control when and how it loads:
109
+
110
+
-`client:load` - Loads on pageload
111
+
-`client:idle` - Loads when CPU is idle
112
+
-`client:visible` - Loads when scrolled into view
113
+
114
+
Islands allow using the component model with Astro's static generation and HTML-focused approach. Astro handles loading the necessary JavaScript for you.
115
+
116
+
## Server-side Rendering
117
+
118
+
Astro originally launched as a static site generator. But now in 2.0, it also supports server-side rendering!
119
+
120
+
To enable SSR, set `output: 'server'` in `astro.config.mjs`:
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!
127
+
128
+
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.
129
+
130
+
## Page Pre-rendering
131
+
132
+
Though Astro now supports SSR, you may want specific pages to be statically generated, like a marketing homepage.
133
+
134
+
2.0 introduced **page pre-rendering** to handle this. For any Astro page, add:
135
+
136
+
```js
137
+
Page.astroexportconstprerender=true
138
+
```
139
+
140
+
When built, this page will be statically generated as HTML instead of using a serverless function.
141
+
142
+
Pre-rendering allows parts of a site to be SSR while keeping important pages fast and static.
143
+
144
+
## Content Collections
145
+
146
+
Content Collections provide a powerful way to manage and access markdown and MDX content.
147
+
148
+
In `src/content`, you can define a schema for a collection:
149
+
150
+
```js
151
+
src/content/config.tsimport {defineCollection, z} from 'astro:content';
In pages, import the collection and access the data:
164
+
165
+
```js
166
+
constposts=awaitAstro.glob('../posts/*.md');
167
+
<ul>
168
+
{''}
169
+
{posts.map((post) => {
170
+
<li>
171
+
<a href={post.url}>{post.data.title}</a>
172
+
</li>;
173
+
})}
174
+
</ul>;
175
+
```
176
+
177
+
Overall, this leads to a much better developer experience than has been possible with Astro content in the past.
178
+
179
+
## Astro 2.0 Migration
180
+
181
+
There weren't a ton of major breaking changes in 2.0:
182
+
183
+
- Upgraded to Vue 3
184
+
- Dropped Node 14 support
185
+
- Some legacy APIs removed
186
+
- Minor changes like output directory
187
+
188
+
Most upgrades should be painless. And the Astro team has been quick to release bugfix patches like 2.0.5, 2.1, etc.
189
+
190
+
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!
191
+
192
+
## Conclusion
193
+
194
+
That wraps up this whirlwind tour of Astro 2.0! Some key takeaways:
195
+
196
+
- Powerful new islands architecture
197
+
- Support for server-side rendering
198
+
- Page pre-rendering
199
+
- Content Collections to manage Markdown/MDX
200
+
- And more!
201
+
202
+
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!
203
+
204
+
What are your thoughts on Astro 2.0? Let me know in the comments!
0 commit comments