Astro

Astro 6 — static-first sites, islands, content collections

The prime directive

Ship zero client JavaScript by default. Hydrate the smallest possible surface, as late as you can get away with. An .astro component renders to HTML at build time and ships no runtime; every island is a bundle the visitor downloads, parses, and executes. Content and marketing sites win on TTFB/LCP and Lighthouse, not on React-everywhere. If you find yourself adding client:load to make a page "work," stop — the page already works; you are adding interactivity, and interactivity is the expensive exception, not the default.

First: detect the project version

Astro 6.0 is stable (released 2026-03-10); the Astro 5 line is still production-ready. Do not mix advice across majors — read package.json → the astro version before advising. What v6 changes, per the upgrade-to-v6 guide:

• Node 22.12.0 or higher is required (18 and 20 are dropped) — check the actual runtime.
• Content config lives at src/content.config.ts. The legacy src/content/config.ts path is removed, not merely discouraged, and the old auto-detection (legacy.collections) is gone. The legacy.collectionsBackwardsCompat escape hatch is a migration crutch, not a supported layout.
• Vite 7 and Zod 4 for content schemas — z is imported from astro/zod, not astro:content (see Content collections below).
• Live Content Collections, the Fonts API and the CSP API are stable.
• The Rust compiler succeeding the Go one is experimental — do not rely on or configure it in production advice.

Decision table — what kind of thing is this?

Pick the cheapest row that satisfies the requirement. Read top-down; stop at the first match.

Rendering model

Default: every page is prerendered to static HTML at build time. You opt into dynamism per route — never the other way around.

---
// src/pages/dashboard.astro — opt this ONE route into on-demand (SSR) rendering.
// Requires a configured adapter (Vercel/Netlify/Cloudflare/Node). Everything else stays static.
export const prerender = false;
const user = await getUser(Astro.request); // runs per request
---
<h1>Hello {user.name}</h1>

---
// src/pages/blog/[slug].astro — many STATIC routes generated from data at build time.
import { getCollection } from "astro:content";

export async function getStaticPaths() {
  const posts = await getCollection("blog");
  return posts.map((post) => ({ params: { slug: post.id }, props: { post } }));
}
const { post } = Astro.props;
---
<h1>{post.data.title}</h1>

In Astro 6 the dev server runs the production runtime (Vite 7 Environment API), so dev no longer diverges from prod on Cloudflare/Bun/Deno — fewer "works in dev, breaks on deploy" surprises. Adapter choice per platform → references/deploy-and-integrations.md.

Islands & client directives

A client:* directive turns a framework component into a hydrated island. Choose the latest directive that still feels instant to the user — never default to client:load.

---
import Carousel from "../components/Carousel.tsx";
---
<!-- Bad: a below-the-fold carousel paying for JS at first paint -->
<Carousel client:load />

<!-- Good: defer its bundle until the user actually scrolls to it -->
<Carousel client:visible />

client:only gotcha: it skips SSR entirely, so the component produces no server HTML (expect a flash/layout shift) and you must name the framework (client:only="react") — Astro can't infer it without the server render. Reach for it only when SSR genuinely breaks; otherwise prefer client:visible.

Content collections (Content Layer)

Type-safe content lives in a single config file. The path is load-bearing:

// src/content.config.ts  ← v6 path. NOT src/content/config.ts (legacy path removed in v6)
import { defineCollection } from "astro:content";
import { z } from "astro/zod"; // v6: z moved OUT of astro:content into astro/zod (Zod 4)
import { glob } from "astro/loaders";

const blog = defineCollection({
  // glob() sources files from anywhere; `id` comes from the filename minus extension
  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/data/blog" }),
  schema: z.object({
    title: z.string(),
    pubDate: z.coerce.date(),
    draft: z.boolean().default(false),
    tags: z.array(z.string()).default([]),
  }),
});

export const collections = { blog };

Query and render in a page. render() is now a standalone call (not entry.render()):

---
// src/pages/blog/[slug].astro
import { getCollection, getEntry, render } from "astro:content";

export async function getStaticPaths() {
  const posts = await getCollection("blog", ({ data }) => !data.draft);
  return posts.map((post) => ({ params: { slug: post.id }, props: { post } }));
}
const { post } = Astro.props;
const { Content } = await render(post);
---
<article><h1>{post.data.title}</h1><Content /></article>

Built-in loaders are glob() (many files) and file() (one JSON/YAML array). Custom and CMS loaders, Zod 4 schema patterns, collection references, Live Content Collections (real-time data with no rebuild, stable in v6), querying and MDX details → references/content-layer.md.

Server islands

When most of a page is static and CDN-cacheable but one fragment is per-visitor, use a server island instead of turning the whole route into SSR. The page ships static; the island is fetched and rendered after first paint.

---
// src/components/UserGreeting.astro — rendered on demand, deferred after the static shell
const user = await getUserFromCookie(Astro.request);
---
<span>Welcome back, {user.name}</span>

---
import UserGreeting from "../components/UserGreeting.astro";
---
<header>
  <!-- static page, one deferred personalized fragment with a placeholder while it loads -->
  <UserGreeting server:defer>
    <span slot="fallback">Welcome</span>
  </UserGreeting>
</header>

This beats full SSR when: the page is otherwise cacheable on a CDN, and only a small slice depends on the request. You keep static LCP and personalize without making every request hit the origin.