Astro

Getting Started

1. What is Astro?What Astro is, its zero-JS-by-default philosophy, and where it fits next to frameworks like Next.js.
2. Astro Project StructureThe default folders in an Astro project — pages, components, layouts, and public — and what lives where.
3. Creating Your First PageHow a .astro file becomes a route, and the basic anatomy of a page.

Components & Templating

1. The .astro Component SyntaxThe frontmatter script block and HTML-like template that make up every .astro component.
2. Dynamic HTML and ExpressionsUsing JavaScript expressions, loops, and conditionals inside an Astro template.
3. Props and SlotsPassing data into components with props and passing markup into them with slots.
4. Styling in AstroScoped style blocks, global styles, and why Astro's default scoping avoids CSS collisions.

Routing & Layouts

1. File-Based RoutingHow the pages/ directory maps directly to your site's URL structure.
2. Dynamic RoutesBracket-named files, getStaticPaths, and building pages for data-driven URLs like blog posts.
3. Layouts and Shared UIWrapping pages in a shared Layout component instead of repeating boilerplate HTML.

Islands Architecture & Interactivity

1. Islands Architecture ExplainedWhy Astro ships static HTML by default and hydrates only the interactive pieces you mark.
2. Client Directivesclient:load, client:idle, and client:visible — controlling when and whether an island hydrates.
3. Using React Components in AstroDropping a React component into an Astro page and hydrating it as an island.

Data & Content

1. Fetching Data in FrontmatterCalling fetch() in a component's frontmatter runs at build/request time, never in the visitor's browser.
2. Content CollectionsType-safe, schema-validated Markdown content managed through Astro's content collections API.

Rendering Modes & Best Practices

1. Static vs. Server RenderingChoosing between Astro's static output and on-demand server rendering.
2. Astro Best Practices and When to Choose ItPractical guidelines for structuring Astro projects, and knowing when Astro is — and isn't — the right choice.