Astro: Build Performance-Focused Static Websites with Islands Architecture

Astro is a modern web framework that flips this paradigm by focusing on performance-first static site generation, enhanced with Island Architecture. It lets you build fast websites using your favorite UI frameworks (React, Vue, Svelte, etc.) while shipping as little JavaScript as possible.

The Problem with Traditional SPAs

SPAs load a large JavaScript bundle up front and often hydrate the entire page, even for content that doesn’t need interactivity. This leads to poor performance on low-end devices, unnecessary JavaScript for static sections like blog posts or documentation.

What is Islands Architecture?

Island Architecture is a web design approach where only small, interactive components (like buttons, search bars, or comments) are hydrated with JavaScript — not the whole page.

In Astro, each interactive UI element is an “island”, and the rest of the page is just static HTML. For example:

The `NavBar` will be hydrated on the client, but `BlogPost` is rendered as static HTML.

Astro gives you full control over when and how components hydrate:

client:load – Hydrate immediately on page load

client:idle – Hydrate when the browser is idle

client:visible – Hydrate when the component scrolls into view

client:media="(max-width: 600px)" – Hydrate conditionally

Astro uses Vite under the hood, so it supports fast dev server, hot reload, and modern module resolution. Pages are typically .astro files, and routing is file-based.