Learn ASTRO with Real Code Examples

Astro helps developers build highly performant websites with minimal JavaScript shipped to the client.

It supports mixing multiple UI frameworks (React, Vue, Svelte, etc.) in one project.

Astro emphasizes server rendering, static generation, and island architecture for partial hydration.

File-based routing

Static Site Generation (SSG)

SSR optional mode

Components as server-rendered templates

Built-in content collections

Astro components (.astro files)

Islands & partial hydration

Routing via filesystem

Layouts & content collections

Markdown & MDX integration

src/pages - routes

src/components - components

src/layouts - page layouts

src/content - content collections

astro.config.mjs - framework config

Create .astro or framework components

Use server-only code by default

Hydrate specific UI islands using directives

Use Astro’s content collection for structured content

Build and deploy to static hosting or SSR platform

Beginner: blogs, static pages

Intermediate: docs sites with MDX

Advanced: SSR-enabled hybrid sites

Expert: multi-framework islands

Community: theme & template creation

More performance-focused than Next.js

Simpler than Nuxt or SvelteKit

Better for static sites than React-based tools

More flexible in framework usage

Less suited for complex apps than full-stack frameworks

2021 – Astro 1.0 early release

2022 – Astro 1.0 stable

2023 – Astro 2.0 with content collections

2024 – Significant SSR improvements

2025 – Multi-runtime stabilization & new integrations

Islands: isolated interactive components

Hydration: turning HTML into an interactive component

Frontmatter: server-side code block in Astro

Adapters: enable SSR on different platforms

Content Collections: schema-validated content system