Astro

Astro is a web framework purpose-built for content-driven sites — blogs, marketing pages, documentation, e-commerce storefronts, and portfolios. Its defining architectural decision is zero JavaScript by default: Astro renders components to static HTML at build time or on the server, and only ships JavaScript to the browser for components explicitly marked as interactive.

Islands architecture is the model behind this. An Astro page is composed of HTML islands with optional interactive component islands hydrated independently. You annotate interactive components with directives like client:load, client:idle, or client:visible to control when JavaScript loads. The result is extremely fast first-page loads and excellent Core Web Vitals with no manual optimisation required.

Astro is UI framework-agnostic: you can import and render React, Vue, Svelte, Solid, Preact, or Lit components in the same .astro file. This makes it practical for teams migrating incrementally or mixing component libraries across a project.

Content Collections provide a type-safe API for authoring content in Markdown, MDX, or YAML. Collections are validated at build time using Zod schemas, giving you TypeScript types for every content entry and catching malformed frontmatter early.

Rendering modes are configurable per page: fully static (pre-rendered at build time), server-side rendered on demand, or hybrid combinations. Official adapters exist for Vercel, Netlify, Cloudflare Workers, Node.js, and Deno.

Astro is built on Vite, enabling fast HMR and quick cold starts. The astro add command installs and auto-configures integrations, keeping setup friction low.

Astro 5 (released late 2024) introduced Content Layer — a revamped content API supporting remote data sources — and server islands for per-component SSR within otherwise static pages.