What Astro Is: The Content-First, Zero-JS-by-Default Framework

Chapter 1

HTML first, JavaScript only where you actually ask for it

React, Vue, Svelte, Angular, and Next.js all share one assumption underneath their real differences: the browser gets a JavaScript runtime, and the page is treated as an application. Astro starts from a genuinely different assumption — most of a real page is content, not application state, and the framework's own default output is plain, static HTML with no JavaScript shipped at all, unless you deliberately ask for some.

Zero JavaScript by Default

Every Astro component renders to plain HTML at build time — including components written in React, Vue, or Svelte and used inside an Astro page. Unlike Next.js, where a React component ships its own JavaScript to the browser and hydrates automatically, an Astro page with ten components on it can ship zero bytes of framework JavaScript by default. Nothing hydrates unless it's told to.

The Islands Architecture

Astro's own name for this model is the islands architecture: picture a page as a mostly static "ocean" of plain HTML, with small, isolated "islands" of interactivity dropped in only where genuinely needed — a like button, a search box, a carousel. Each island hydrates independently, on its own schedule, rather than the whole page hydrating as one unit the way a client-rendered React or Vue app does.

Astro vs. Next.js — both meta-frameworks, genuinely different assumptions

Both ship file-based routing and both can render on the server. But Next.js is fundamentally a React framework — every component is a React component, and the framework assumes hydration is the point. Astro is framework-agnostic at the page level: a single Astro page can mix plain Astro components, a React component, and a Svelte component, with the page itself owning zero runtime unless specific islands opt into one — covered fully in Chapter 7.

Why "Content-First"?

Astro was built with blogs, documentation sites, marketing pages, and portfolios in mind — sites where the overwhelming majority of the page is content that never changes after it's rendered, and only a handful of small pieces are genuinely interactive. That's a real, different sweet spot from a framework built assuming the whole page is one interactive application from the start.

Not "only for static blogs"

Astro's own reputation as a static-site tool is only half the picture. Astro also supports full server-side rendering and a hybrid mode mixing both — covered in Chapter 10. The zero-JS-by-default philosophy holds regardless of which rendering mode a given deployment uses.

Four Frameworks, One New Assumption

Concept	React / Vue / Svelte	Astro
Ships JS by default?	Yes — a framework runtime, always	No — plain HTML unless a component opts in
Hydration model	Whole page/app, at once	Per-component "islands," independently
Framework lock-in per page	One framework for the whole app	React, Vue, and Svelte components can coexist on one page
Sweet spot	Interactive applications	Content-heavy sites with occasional interactivity

Creating a Project

# scaffold a new Astro project
npm create astro@latest

cd my-astro-site
npm run dev

The scaffolding wizard offers a few starter templates — an empty project is the clearest one to learn from. npm run dev starts the dev server with live reload, the same as every other framework in this series.

src/pages/ — every file here becomes a real page, by convention (Chapter 3)
src/components/ — reusable .astro components
src/layouts/ — shared page shells (Chapter 4)
astro.config.mjs — the project's own configuration file

Coding Challenges

Challenge 1

Scaffold a new Astro project, then edit src/pages/index.astro so it renders a heading interpolating a name from a frontmatter variable.

📄 View solution

Challenge 2

Build a Card.astro component that accepts a title prop, use it inside index.astro, and confirm via your browser's View Source that no JavaScript was shipped for it.

📄 View solution

Challenge 3

Add a second page, src/pages/about.astro, with no route configuration written anywhere, and confirm it's served automatically at /about.

📄 View solution

Chapter 1 Quick Reference

Zero JS by default — every component renders to static HTML unless deliberately hydrated
Islands architecture — small, independent interactive components in an otherwise static page
Framework-agnostic — React, Vue, and Svelte components can all live on one Astro page
Content-first — built for blogs, docs, and marketing sites, not assumed-interactive apps
Not static-only — SSR and hybrid rendering exist too, covered in Chapter 10
npm create astro@latest / npm run dev — scaffold and run
Next chapter: the .astro file and component syntax