Astro 6: the game-changing new features

On March 11, 2026, the Astro team officially launched Astro 6.0, a major update that cements the framework’s position as the go-to tool for content-driven websites. After joining Cloudflare in January 2026, Astro accelerates further with a set of features that fundamentally change how we build performant websites.

A redesigned dev server

The first thing you’ll notice when running astro dev in Astro 6 is the completely redesigned development server. Built on Vite’s new Environment API, this new server now runs your exact production runtime during development.

This approach eliminates the classic “works in dev but not in prod” discrepancies. The server natively handles Node.js, Cloudflare Workers, Vercel Edge, and other serverless platforms with complete consistency. Cloudflare compatibility has been significantly improved, reflecting the strategic partnership announced in late 2025.

Live Content Collections: dynamic content made easy

Content Collections have been a core part of Astro since version 2.0, but they required a rebuild whenever content changed. Live Content Collections, now stable in Astro 6, change the game by fetching content at request time.

How it works

Unlike static collections defined in content.config.ts, live collections are configured in a dedicated live.config.ts file. You create a loader that defines two methods:

// loaders/cms-loader.ts
import type { LiveLoader } from 'astro/loaders';

export function cmsLoader(options: { apiKey: string }): LiveLoader<Article> {
  return {
    name: 'cms-loader',
    async loadCollection() {
      return await fetchFromCMS(options.apiKey);
    },
    async loadEntry(id: string) {
      return await fetchArticle(options.apiKey, id);
    },
  };
}

Then you declare it in your configuration:

// live.config.ts
import { defineLiveCollection } from 'astro:content';
import { cmsLoader } from './loaders/cms-loader';

const articles = defineLiveCollection({
  loader: cmsLoader({
    apiKey: process.env.CMS_API_KEY!,
  }),
});

Usage in your pages remains identical to static collections:

---
export const prerender = false;
import { getLiveCollection } from 'astro:content';

const articles = await getLiveCollection('articles');
---

{articles.map(article => (
  <article>
    <h2>{article.data.title}</h2>
  </article>
))}

Real-world use cases

This feature is particularly useful for frequently changing content: blog articles hosted on a headless CMS, product catalogs synced with an ERP, or real-time data from third-party APIs. No need to trigger a full rebuild — content updates instantly upon publication.

Fonts API: simplified and performant typography

Web font management is surprisingly complex. Between performance trade-offs, privacy concerns (font CDNs like Google Fonts raise GDPR questions), and preloading subtleties, it’s easy to get things wrong.

Astro 6 introduces a built-in Fonts API that simplifies all of this. You configure your fonts from local files or providers like Google Fonts, Fontsource, or Bunny, and Astro handles the rest: downloading, caching for self-hosting, generating optimized fallbacks, and automatically adding preload links.

// astro.config.mjs
import { defineConfig, fontProviders } from 'astro/config';

export default defineConfig({
  fonts: [
    {
      name: 'Roboto',
      provider: fontProviders.google(),
      cssVariable: '--font-roboto',
    },
    {
      name: 'Inter',
      provider: fontProviders.fontsource(),
      cssVariable: '--font-inter',
    },
  ],
});

The API also supports local fonts and npm packages via the fontProviders.npm() provider. The result: optimized loading times, no external requests in production, and guaranteed GDPR compliance since fonts are served from your own domain.

Content Security Policy: native security

Security is often overlooked in JavaScript frameworks. Astro 6 changes this approach with a built-in Content Security Policy (CSP) API, making Astro one of the first meta-frameworks to offer native CSP that works for both static and dynamic pages.

Why it’s hard

Implementing CSP correctly in a framework like Astro is a real technical challenge. It requires knowing every script and style on a page to hash them and include them in the policy. For static pages, this can be computed at build time. But for dynamic pages, it’s more complex.

Astro solves this problem with a unified API. Enabling it is simple:

// astro.config.mjs
export default defineConfig({
  security: {
    csp: true,
  },
});

For more control, you can configure the hashing algorithm and directives:

export default defineConfig({
  security: {
    csp: {
      algorithm: 'SHA-512',
      directives: [
        "default-src 'self'",
        "img-src 'self' https://images.cdn.example.com",
      ],
    },
  },
});

A notable point: CSP works natively with Astro’s responsive images. Styles computed at build time are applied via CSS classes and data-* attributes, allowing their automatic hashing in the CSP policy.

Experimental Rust compiler: performance on the horizon

Astro 6 introduces an experimental Rust compiler, successor to the Go-based compiler that made the framework famous. What started as an experiment while updating the Go compiler quickly became a no-brainer: the Rust compiler is faster, produces more precise diagnostics, and in some cases is more reliable than the current one.

To enable it:

npm install @astrojs/compiler-rs

// astro.config.mjs
export default defineConfig({
  experimental: {
    rustCompiler: true,
  },
});

Although marked experimental, the results are already impressive. The team plans to make it default in a future major release and continues investing in Rust-powered tooling to improve overall Astro performance.

Other notable improvements

Queued Rendering

Astro 6 experiments with a new rendering strategy with benchmarks showing up to 2x faster rendering. This approach queues render requests to optimize server resource utilization.

Route Caching

The route caching API allows fine-grained caching of dynamic pages:

Astro.cache.set({
  maxAge: 120,
  swr: 60,
});

Updated dependencies

Astro 6 requires Node.js 22+, as previous versions are approaching end-of-life. Node 22 is faster, more secure, and allows dropping polyfills for older Node versions — resulting in a smaller, more maintainable package and better performance across the board.

Migrating from Astro 5

Migration from Astro 5 is relatively smooth. The main points to watch:

• Removal of legacy content collection support
• Node.js 22 is now required
• The experimental.liveContentCollections flag is removed (now stable)
• The CSP API is conditional: Astro.csp can be undefined if not configured

Consult the official migration guide for detailed steps.

Conclusion

Astro 6 isn’t just a simple update — it’s a profound overhaul that positions the framework as the reference solution for content-driven websites. Live Content Collections open the door to dynamic use cases while preserving Astro’s “content-first” philosophy. The Fonts API and native CSP demonstrate that Astro takes performance and security seriously.

As a freelance developer using Astro daily on client projects, I’m particularly excited about Live Content Collections. They solve a recurring problem: how to handle dynamic content without sacrificing the benefits of static rendering? Astro 6 finally provides an elegant answer to this question.

The Rust compiler, while still experimental, promises significant performance gains for building large sites. It’s a direction that aligns with the broader JavaScript ecosystem trend toward tools written in compiled languages (Rust, Go) for optimal performance.