Astro Framework Guide: Content-First Web Development [2026]

Most JavaScript frameworks send the entire framework to the browser along with your page content. Even if 90% of your page is static text, the browser still downloads and executes JavaScript to render it. This hurts performance, especially on mobile. Astro takes the opposite approach: render everything to HTML on the server and only ship JavaScript for the specific interactive components that actually need it.

The result is sites with dramatically lower JavaScript payloads and better Lighthouse scores — which matters for SEO, user experience, and especially for content sites where most visits are read-only.

Islands Architecture Explained

The "islands" metaphor: most of a web page is static HTML (the ocean) with small interactive areas (islands) scattered throughout — a navigation toggle, a newsletter form, an image carousel.

---
import Counter from './Counter.jsx';
import SearchBar from './SearchBar.vue';
---

<!-- Static HTML - zero JS sent -->
<h1>My Blog</h1>

<!-- Hydrated immediately on page load -->
<Counter client:load />

<!-- Hydrated when visible (better for below-fold) -->
<SearchBar client:visible />

<!-- Hydrated on idle (low priority) -->
<Newsletter client:idle />

Content Collections: Type-Safe Markdown

Content Collections are Astro's solution for managing large amounts of Markdown or MDX content. Define a schema for your content type, and Astro provides type-safe access to all your files.

import { z, defineCollection } from 'astro:content';

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.date(),
    tags: z.array(z.string()).optional()
  })
});

export const collections = { blog };

Astro vs Next.js: Which to Choose