Getting Started with Astro

Astro takes a different bet than most JavaScript frameworks: ship zero JavaScript by default.

For content-heavy sites — blogs, documentation, marketing pages — this turns out to be the right bet most of the time.

The Problem Astro Solves

Modern frontend frameworks (React, Vue, Svelte) ship a JavaScript runtime to every user. Even if your page is mostly static text, the browser downloads, parses, and executes hundreds of kilobytes of JavaScript before rendering anything interactive.

For pages that don’t need rich interactivity, this is waste.

Island Architecture

Astro introduces the concept of islands — isolated interactive components surrounded by static HTML.

---
// Static Astro component — ships zero JavaScript
import Counter from './Counter.tsx';
---

<h1>My Page</h1>
<p>This is static HTML — no JS needed.</p>

<!-- Only this island is hydrated -->
<Counter client:visible />

The client:visible directive tells Astro to hydrate the component only when it scrolls into view. Other options:

Content Collections

Astro’s content collection system provides type-safe access to your Markdown and MDX content:

// src/content.config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: '**/*.mdx', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()),
  }),
});

export const collections = { blog };

Now your frontmatter is validated at build time. If you forget a required field, the build fails — not silently, not at runtime, at build time.

Performance Results

On this site, Astro generates:

• 0 KB of JavaScript for purely static pages
• Near-perfect Lighthouse scores out of the box
• Sub-100ms Time to First Byte on Cloudflare Pages

That’s the bar to beat.

Next up: profiling Astro builds and understanding where compile time goes.