Why Astro

Astro starts from the HTML the visitor needs. Everything else is optional.

This is the opposite of what most JavaScript frameworks do. They start from a JavaScript application and produce HTML as a side effect. Astro produces HTML first, and you add JavaScript only where you need it.

Let’s see what that means in practice. Here is a tiny Astro component:

---
const title = 'My field notes'
---

<h1>{title}</h1>

The code between the two --- lines is the component script. It runs while Astro renders the page. That can happen during the production build, or on the server when a request comes in. It never runs in the browser.

The browser receives an h1 tag with the text inside. It does not receive the title variable. It does not receive an Astro runtime. Just HTML.

Add JavaScript on purpose

Most pages are mostly static. Links, text, images, a form. Maybe one search box needs to react to typing, or one chart needs to redraw.

In Astro you keep the page as plain HTML and turn only that search box into an island: a small interactive component that ships its own JavaScript. The rest of the page stays free of client code.

This is why I use Astro for content sites. Blogs, documentation, marketing pages, small stores. Anything where people read more than they click. My own site runs on it.

What Astro does not do

Astro does not make every page fast by magic. A 4 MB hero image is still 4 MB. A third-party analytics script still blocks. A component you hydrate for no reason still downloads its framework.

What Astro does is make those decisions visible. Every byte of JavaScript on the page is there because you asked for it.

Be careful with the opposite case too. If you’re building a dense application with lots of local state, like a spreadsheet or a drawing tool, an application framework like React or Vue on its own may be a clearer fit. Astro shines when HTML-first rendering matches the product.

Try this on the example above: render it, then view the page source in the browser. The heading is already there before any JavaScript runs. That’s the whole idea.