Back to portfolio
Engineering Mar 15, 2026 5 min read

Why I build with Astro in 2026

Most websites ship far more JavaScript than they need. Astro flips the default: send HTML and CSS, and add JavaScript only where it earns its place. In 2026, that's still the fastest way I know to build content-driven sites.

0 KB
JS shipped by default
0
Lighthouse score
0 M
npm downloads / week

Ship less JavaScript

The single biggest lever on a fast site is how much JavaScript the browser has to download, parse and run. Traditional SPA frameworks hydrate the entire page by default. Astro ships zero JavaScript out of the box.

JavaScript shipped by default

Kilobytes of JS on a typical marketing page (hover a row)

Astro
0 KB
SvelteKit
32 KB
Next.js
78 KB
Gatsby
94 KB
Astro's rule of thumb: the browser should never download code to make something interactive that was never interactive in the first place. A blog post doesn't need a 90 KB runtime.

Islands, not whole pages

When you do need interactivity, a cart, a carousel, a search box, Astro lets you drop in a component as an island. It hydrates on its own, independently of everything around it, and you choose exactly when with a single directive:

client:load
Hydrates the island immediately on page load. Use it for things that must be interactive right away, like a header search.
client:visible
Waits until the component scrolls into view before loading its JavaScript. Perfect for below-the-fold widgets.
client:idle
Defers hydration until the browser is idle, so it never competes with more important work during the initial load.
client:media
Only hydrates when a media query matches, e.g. load a mobile menu's JS on small screens only.

What an island looks like

You write components like normal, React, Svelte, Vue or plain Astro, and add a single directive. Here, only the Add to cart button ships JavaScript, and only once it's on screen:

---
// product-card.astro, zero JS unless it needs it
import AddToCart from "./AddToCart.tsx";
const { product } = Astro.props;
---

<article class="card">
  <img src={product.image} alt={product.name} />
  <h3>{product.name}</h3>
  <p>{product.price}</p>

  <!-- Only THIS component ships JavaScript,
       and only once it scrolls into view -->
  <AddToCart client:visible product={product} />
</article>

The payoff, in one number

On real projects, moving a content site from an SPA to Astro routinely strips out the vast majority of shipped JavaScript, with no loss of interactivity where it actually matters.

90%
less JavaScript than a comparable React SPA

Around 90% less JavaScript means faster loads, better Core Web Vitals, and a site that works even on a flaky connection or an older phone. That's a win you feel on every single visit.

Where Astro shines (and where it doesn't)

  • Great for: marketing sites, blogs, docs, portfolios, e-commerce, anything content-heavy where speed and SEO matter.
  • Content Collections give you type-safe Markdown/MDX with autocomplete and validation built in.
  • Bring your own framework: mix React, Svelte and Vue in the same project if you need to.
  • Less ideal for: highly stateful, app-like dashboards where almost everything is interactive, there, a full SPA may fit better.

For the kind of work I do most, fast, content-driven sites that need to rank and convert, Astro hits the sweet spot. It's why this very portfolio is built with it.

Want a site that's fast by default?

I build lightning-quick, accessible sites with Astro.

Let's Talk