Today (1/24) the Astro team announced the official release of version 2.0 of the framework. If you haven't used, or heard of Astro, it's a web framework used to build fast, content-focused websites. Astro implements islands architecture. This means that JavaScript is only shipped to the client when absolutely necessary. With this, Astro makes it easy to build performant sites, either Static or SSR, and still have interactivity where needed through islands. There are plenty of other benefits like accessibility, SEO, and more. That's another story for another time.
Enough about what Astro is though. Keep an eye out for another article about using Astro. Until then, check out the Getting Started Docs. If you're already using Astro you can check out the Migration Guide.
What's New 🆕
Astro already provides phenomenal DX that makes creating Static or SSR websites with ease. Simply build your site the Astro way, add islands with the framework/library of your choosing, add an adapter for the platform you plan to deploy to, and deploy. With Astro 2.0 there are some great improvements to further improve the DX of building with the framework.
Content Collections 🗂
Astro allows you to use Markdown and/or MDX to write your content. With the new Content Collections API you group your collections under the src/content directory. This allows you to better organize your content, make your content in the collections type-safe, and validate frontmatter. While you may have already been organizing your content in a similar way before, those last two points are a massive gain. You no longer have to go searching for the source of an error where you may have misspelled something in your frontmatter.
Hybrid Rendering 🏆
For me, and I'm sure for many others, this is a stellar (insert rimshot GIF here) addition. Now you can determine which pages are Static (prerendered) and which are SSR. This is something I really enjoy in SvelteKit and it has now been added here as well. Simply add export const prerender = true to the routes that you want to be Static and those routes will be rendered during the build rather than on the server. Let's say that you have an e-commerce site with a store and an about route. You may want to prerender your about route since it likely doesn't change, however you'll want your store to be SSR so your users can check out your cool new items as soon as you add them. With Hybrid Rendering, this is now an extremely simple task.
Improved Error Overlay 🧯
With the new and improved error overlay you get more information about errors, links to help you resolve the error, and the ability to click a button to open your code in an editor of your choosing.
And more...
There are more improvements included as well, such as:
- Update to Vite 4.0
- Dev Server Optimizations
- & Public Roadmap
Wrap It Up 🎁
Astro was already pretty impressive, and with this latest release continues to be even more impressive. As I mentioned previously, stay tuned for my series on creating a site with Astro. In the meantime, check out the official Astro 2.0 blog post for more information and links, and go build something cool with Astro!
Top comments (0)