Astro 5: Content Collections, Server Islands, and Beyond

Astro 5 introduces server islands for fine-grained partial hydration and enhanced content collections for managing structured content.

Server Islands

Defer expensive components to load after the page:

---
// Static content renders immediately
import Header from "./Header.astro";
import Comments from "./Comments.astro";
---

<Header />
<main>Static content here</main>

<!-- Server island loads after page -->
<Comments server:defer>
  <p slot="fallback">Loading comments...</p>
</Comments>

Content Collections

// src/content/config.ts
import { defineCollection, z } from "astro:content";

const blog = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    tags: z.array(z.string()),
  }),
});

export const collections = { blog };

Using Collections

---
import { getCollection } from "astro:content";

const posts = await getCollection("blog", ({ data }) => {
  return data.tags.includes("typescript");
});
---