Going Further

You’ve covered the fundamentals. Here’s a map of what to explore next, with rough complexity rankings.

Astro DB

A first-party SQLite + Drizzle integration with seed data and type-safe queries.

npx astro add db

Define tables in db/config.ts, query with db.select() from pages and actions. Great fit for small content/auth/comments features without bringing a separate database service.

Custom Content Loaders

Beyond glob and file, you can write your own loader to pull content from a CMS (Sanity, Contentful), a database, or an API — with full type safety. The pattern: a function that returns { id, data } entries.

const cmsLoader = defineCollection({
  loader: async () => {
    const posts = await cms.posts.findAll();
    return posts.map(p => ({ id: p.slug, ...p }));
  },
  schema: z.object({ /* ... */ }),
});

Image Services

The default image service is Sharp at build time. For dynamic remote images at scale, plug in Cloudinary, Imgix, or a custom service.

Streaming and Suspense

Astro 4+ supports server streaming. Slow data sources render last; fast parts of the page render first. Pair with React <Suspense> for islands that wait for data.

View Transitions Deep Dive

The basic <ClientRouter /> is just the start. You can:

• Per-element animations with transition:name and transition:animate
• Persistent islands across pages with transition:persist
• Listen to astro:before-preparation / astro:after-swap to hook into navigation

More to Explore

Course Complete

You’ve gone from the .astro file format to deploying a real site with content, islands, and server-rendered pages. The next step is to build — pick a project, ship it, learn what you actually need next.