Astro Cheat Sheet

A reference for Astro's component syntax, islands architecture, client directives, and content collections for content-focused websites.

2 PagesIntermediateMar 20, 2026

Astro Component

Frontmatter runs at build/request time; the template renders below it.

astro

---import Layout from '../layouts/Layout.astro';const { title } = Astro.props;const posts = await fetch('https://api.example.com/posts').then((r) => r.json());---<Layout title={title}>  <h1>{title}</h1>  <ul>    {posts.map((post) => <li>{post.title}</li>)}  </ul></Layout><style>  h1 { color: darkslateblue; }</style>

Content Collections

Type-safe, schema-validated Markdown/MDX content.

typescript

// src/content/config.tsimport { defineCollection, z } from 'astro:content';const blog = defineCollection({  type: 'content',  schema: z.object({    title: z.string(),    pubDate: z.date(),    draft: z.boolean().default(false),  }),});export const collections = { blog };// usage in a pageimport { getCollection } from 'astro:content';const posts = await getCollection('blog', ({ data }) => !data.draft);

Islands Architecture

How Astro controls which components ship JavaScript to the client.

Islands architecture- Astro ships zero JS by default; only components with a client directive get hydrated
client:load- hydrates the component immediately when the page loads
client:idle- hydrates the component when the browser is idle (requestIdleCallback)
client:visible- hydrates the component once it scrolls into the viewport
client:only- e.g. client:only='react' skips server rendering and renders only on the client
.astro components- support top-level await and can mix multiple UI frameworks in one project
getStaticPaths- defines the dynamic route params for statically generated pages

API Routes & Config

A server endpoint and the project configuration file.

typescript

// src/pages/api/hello.tsexport async function GET() {  return new Response(JSON.stringify({ message: 'Hello' }), {    headers: { 'Content-Type': 'application/json' },  });}// astro.config.mjsimport { defineConfig } from 'astro/config';import react from '@astrojs/react';export default defineConfig({  integrations: [react()],  output: 'static', // or 'server' for SSR});

Pro Tip

Add a client:* directive only to the specific interactive component (e.g. a like button), not the whole page -- that is the entire point of islands architecture, and it is what keeps Astro sites shipping near-zero JavaScript by default.

Was this cheat sheet helpful?

Gatsby Cheat Sheet

Nuxt.js Cheat Sheet

Explore Topics

#Astro#AstroCheatSheet#WebDevelopment#Intermediate#AstroComponent#ContentCollections#IslandsArchitecture#APIRoutesConfig#DataStructures#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services