Foundations & Mental Model
Islands architecture, zero-JS by default, the .astro component, and static vs on-demand rendering. Start →
Astro Deep Dive
A standalone, intermediate→advanced course on Astro 7. From islands architecture and the .astro component to client directives, content collections, on-demand rendering, Actions, server islands, and view transitions — taught through annotated code and diagrams that show what Astro ships to the browser and why.
What you’ll learn
Section titled “What you’ll learn”Components & Templating
Astro syntax, scoped styles & scripts, slots & composition, and Markdown/MDX. Compose →
Islands & Client Interactivity
Client directives, UI framework integrations, sharing state, and server islands. Hydrate →
Content & Data
Content collections & the Content Layer API, Zod schemas, data fetching, and dynamic routes. Model →
Server-Side Astro
SSR & adapters, API endpoints, Actions, and middleware & sessions. Serve →
Rendering, Performance & UX
View transitions with ClientRouter, images & assets, the zero-JS default, and caching. Optimize →
Tooling, Integrations & Production
Config & integrations, TypeScript & content types, testing, and deployment. Ship →
How Astro Works
Real compiler output, the astro-island hydration lifecycle, the content layer data store, the request pipeline, and the build pipeline — cited from Astro 7’s own source. Look inside →
Reading AI-generated Astro
A 22-bug catalog of what AI-generated Astro gets wrong, a review checklist, verification tools, and three worked reviews — every bug proven. Review →
Glossary
74 terms from island to Sätteri, with the Astro version each was added or removed in. Look up →
How this course works
Section titled “How this course works”The model first, then the code
Every topic starts from a model — islands, the server-first render, the content pipeline — so Astro’s choices stop feeling arbitrary and start feeling inevitable.
Astro 7, verified
Written against Astro 7 (the native Rust compiler, Vite 8 with Rolldown, the Sätteri Markdown pipeline, stable route caching) and checked against the official docs — the Content Layer API (src/content.config.ts with loaders), <ClientRouter />, server islands, Actions, and sessions are covered as they exist today.
Design, not just syntax
Not “here’s a client directive” but “here’s why you ship an island instead of hydrating the page, and which directive fits.” You’ll reason about what reaches the browser with confidence.
Diagrams that explain
Islands hydration, the render pipeline, the content collection flow, and server islands as theme-aware Mermaid diagrams. Bilingual (English / ไทย) with saved quiz progress.