Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →

menu_book Course Curriculum (Astro) expand_more

Components

Astro component Component frontmatter Component props Default props Component slots Named slots HTML attributes Dynamic attributes Conditional rendering List rendering

Pages & Routing

src/pages routing Index page Dynamic route Rest parameters getStaticPaths 404 page Redirects Route priority Endpoint route Trailing slash

Layouts & Content

Layout component Nested layouts Content collections Collection schema getCollection getEntry Render content Markdown pages MDX integration Content images

Styling

Scoped styles Global styles CSS variables Class:list Sass integration Tailwind integration CSS modules Style props External stylesheet Critical CSS

Islands

Static component client:load client:idle client:visible client:media client:only Framework component Hydration boundary Sharing state Nano Stores

Data & Server

Top-level await Fetch at build time Astro.glob migration Astro.request Astro.url Cookies API Server actions Middleware API endpoint Environment variables

Rendering

Static output Server output Adapter configuration Prerender page On-demand rendering Streaming SSR Redirect response Headers Sessions View transitions

Performance & Testing

Image component Picture component Font optimization Prefetch Bundle client JavaScript Accessibility audit Component test End-to-end test Build analysis Deployment adapter

Astro / Data & Server

Server actions

Learn Server actions in Astro with a dedicated explanation, topic-specific example, edge guidance, and mastery check.

12 min read • Intermediate

astro-057.astro

astro

export const server = { save: defineAction({ input:z.object({name:z.string()}), handler:async({name})=>({saved:name}) }) };

What to watch

Content source & attribution

Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Server actions Mastery Check →