Astro 0.21 Preview: Vite + WASM = ⚡️

By
Fred Schott

Astro v0.21.0 will be our biggest release yet. At a high-level, it includes:

You can try out our latest release today in the browser or by running npm install astro@next--compiler in a new project directory on your machine.

Astro is quickly becoming the production-ready framework for building faster, content-focused websites. To celebrate this milestone, here are some highlights and details on what you can expect in Astro v0.21.0 and beyond.

Hello, Vite!

Astro 0.21 is getting an internal build engine upgrade, replacing Snowpack with Vite going forward.

We ran some early experiments with Vite and came away extremely impressed. Vite is well-maintained, well-documented, a bit faster, has great error messages, and has been building clear community buy-in across multiple frameworks. SSR handling can be a bit flakey, but the Vite team is aware of this and actively working on it.

So now, when Evan You tweets about some great performance optimization that they’re making in Vite you can be certain that the same speed is coming to Astro as well.

The reverse is also true: we can now contribute fixes and improvements back to the larger Vite community. Now, when we fix an SSR bug in Astro (like adding support for ESM-only npm packages) we’re also fixing it for every other Vite user, including SvelteKit.

There’s one other huge benefit to choosing Vite: Rollup plugins. Starting in v0.21.0, you’ll be able to connect the entire ecosystem of Rollup plugins to Astro. Enable new features like image optimizations and icon loading with just a few simple plugins. Magic!

This switch from Snowpack to Vite might come as a surprise to some: Both Drew and myself are maintainers on both projects. This was a hard decision for us to make. But ultimately, after working with both tools I can confidently say that Vite will be a great choice for Astro’s future.

Hello, WASM!

Astro 0.21 features another huge low-level improvement: the brand new @astrojs/compiler. Astro’s new compiler is written in Go and distributed as WASM. You can run it right in your browser, or on the server in Node.js and Deno.

The new @astrojs/compiler unlocks:

  • Flexibility: Run the compiler anywhere with WASM.
  • Speed: Build sites faster with Go’s compiled-language performance.
  • Stability: Writing our own compiler allowed us to fix some long-standing bugs.

You can play with the new compiler today right in your browser at https://astro.build/play. This REPL is just one example of what is now possible when you have a fast, runs-anywhere compiler.

Shout out to Nate Moore who did an incredible job with this project.

Components in Markdown

Our most requested feature by far has been the ability to use components directly in Markdown. After months of work, we’re excited to announce that this feature is finally coming to Astro.

Starting in v0.21.0, you can import components inside of your Markdown frontmatter via an optional setup script. Once imported, your components can be used anywhere on the page:

---
title: "Astro 0.21 Early Preview"
setup: |
  import Logo from '../components/Logo.astro';
  import ReactCounter from '../components/Counter.jsx';
---


# Astro now supports components in Markdown!


<Logo />


- Back to markdown here.
- Supports static Astro components.
- Supports dynamic React/Vue/Svelte components!


<ReactCounter start={0} client:load />

This new setup script was designed for maximum flexibility. We’ll keep improving this API going forward with planned support for default components, default layouts, and markdown component overrides.

HMR, meet HTML

Starting in v0.21.0, Astro will support full HMR for Astro components and pages. Change any .astro file in your codebase, and watch the dev server update the page without a full refresh and without losing any client state.

Astro has always supported powerful HMR updates for client-side JavaScript components like React, Preact, Svelte, Vue, and Solid.js. But adding this for Astro was a fun challenge because Astro components are just static HTML. Our “Zero JavaScript” approach meant that there was no “Astro runtime” to hook into for updates. We had to get creative.

Now, Astro’s dev server sends HTML updates to the browser and then runs a small script to diff those updates against the current page. This creates a more granular, component-level HMR update that won’t impact the rest of the page.

Try it today

If you’ve read this far, we’d love your help trying out the latest release before launch. You can try out our latest release today in the browser or by running npm install astro@next--compiler in a new project directory. You can follow our progress and leave feedback in the next PR on GitHub: https://github.com/withastro/astro/pull/1406

Leave feedback, report bugs, and get involved with Astro’s development in our Discord server. You can also follow along on Twitter.