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 6. 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 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 6, verified
Written against Astro 6 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.