FRONT END

Home › Glossary › Front End· 40 ·

Astro

\\as-troh\\n.

Filed underFront EndSoftware Engineering

In brief · quick answer

Astro is a content-focused web framework that ships zero JavaScript by default. It uses island architecture to render static HTML and only hydrates interactive components on demand, supporting multiple UI frameworks (React, Vue, Svelte) within the same page.

§ 1 Definition

Astro is a web framework designed for content-driven websites (marketing sites, blogs, documentation, e-commerce) that prioritizes minimal JavaScript output. Unlike most frameworks that ship a JavaScript runtime by default, Astro renders every page to static HTML with zero JavaScript. Only components explicitly marked as interactive (using `client:*` directives) are hydrated on the client. This island architecture approach means Astro pages can contain components built in React, Vue, Svelte, Solid, or Preact on the same page, and Astro will only ship the JavaScript for the interactivity each component needs. Astro supports multiple rendering modes: static (SSG, default, zero JS), server (SSR with on-demand rendering), and hybrid (mix of static and server routes). Astro 5.x (released 2025) introduced Server Islands, where dynamic content can be rendered per-component after the static shell is delivered, and content collections with type-safe frontmatter schemas.

§ 2 Island Architecture

Island architecture is Astro's defining innovation. The page is rendered as static HTML by default. Individual interactive components (an image carousel, a search bar, a like button) are marked as islands using the `client:load` (hydrate immediately), `client:idle` (hydrate when browser is idle), `client:visible` (hydrate when scrolled into viewport), or `client:media` (hydrate at a specific breakpoint) directives. Each island is a self-contained React, Vue, or Svelte app that operates independently. This means Astro pages are static HTML with small, targeted JavaScript islands rather than a monolithic JavaScript application.

§ 3 Content Collections

Astro's content collections provide a type-safe way to manage Markdown, MDX, Markdoc, and JSON content. Content files are stored in `src/content/` with optional YAML frontmatter schemas defined using Zod. Astro validates all content against the schema at build time and generates TypeScript types automatically. This eliminates an entire category of bugs (missing fields, wrong types) in content-driven sites. Content collections support pagination, filtering, sorting, and RSS feed generation.

§ 4 Note

Common misunderstanding: Astro is not just a static site generator (though it does SSG excellently). Astro 4+ supports server-side rendering for dynamic routes, API endpoints, and server islands. It is a full framework that can handle both static and dynamic content. Another misconception: Astro only works for blogs. Companies like Google (web.dev), The Guardian, and Nord Security use Astro for production sites. Any content-heavy site that does not need to be a full SPA benefits from Astro's approach.

§ 5 In code

```astro
---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';
import Header from '../components/Header.astro';
import CartButton from '../components/CartButton.jsx';
---

<Layout>
  <Header />
  
  <!-- This is rendered as static HTML. No JavaScript needed. -->
  <main>
    <h1>Welcome to our store</h1>
    <p>Static content, zero JavaScript.</p>
  </main>
  
  <!-- Only this interactive island ships JavaScript -->
  <CartButton client:visible />
</Layout>
```

§ 6 Common questions

Q. Can I use React components in Astro?: A. Yes. Astro supports React, Vue, Svelte, Solid, Preact, Lit, and vanilla web components. You can mix frameworks on the same page, though each framework adds to the JavaScript bundle.
Q. Should I use Astro or Next.js?: A. For content-heavy sites (blogs, marketing, documentation) where most of the page is content, use Astro. It ships less JavaScript. For highly interactive web applications (dashboards, social networks, collaborative tools), use Next.js.

Key takeaways

Astro ships zero JavaScript by default and only hydrates interactive islands on demand.
Island architecture allows using multiple frameworks (React, Vue, Svelte) on the same page.
Content collections provide type-safe, validated content management with automatic TypeScript types.

How Atomic Glue helps

Atomic Glue uses Astro for content-driven client sites where performance and minimal JavaScript are the highest priorities. For marketing sites, blogs, and documentation portals, Astro can achieve near-perfect Lighthouse scores because there is almost no JavaScript to block rendering. Our team leverages Astro's multi-framework support to build interactive islands (forms, search, carts) in React while keeping the rest of the page as static HTML. This targeted approach to interactivity is central to our website development strategy for content-first projects.

Get in touch

# Astro

Category: Front End (also: Software Engineering)

Author: Atomic Glue Development Team

## Definition

## Island Architecture

## Content Collections

## Note

## In code

## Common questions
Q: Can I use React components in Astro?
A: Yes. Astro supports React, Vue, Svelte, Solid, Preact, Lit, and vanilla web components. You can mix frameworks on the same page, though each framework adds to the JavaScript bundle.
Q: Should I use Astro or Next.js?
A: For content-heavy sites (blogs, marketing, documentation) where most of the page is content, use Astro. It ships less JavaScript. For highly interactive web applications (dashboards, social networks, collaborative tools), use Next.js.

## Key takeaways

Astro ships zero JavaScript by default and only hydrates interactive islands on demand.
Island architecture allows using multiple frameworks (React, Vue, Svelte) on the same page.
Content collections provide type-safe, validated content management with automatic TypeScript types.

## Related entries

Last updated June 2026. Permalink: atomicglue.co/glossary/astro