Introduction to Astro Islands

Astro is a modern web framework designed for content-focused websites. By default, Astro renders pages to static HTML on the server and ships zero JavaScript to the client. When interactivity is required, Astro allows you to hydrate individual components dynamically.

Why Astro?

Unlike traditional Single Page Applications (SPAs) that require downloading and parsing a large JavaScript bundle before rendering any content, Astro loads the page instantly as HTML.

Here are the key benefits:

1. Zero JS by Default: Faster first contentful paint.
2. Framework Agnostic: Use React, Preact, Svelte, Vue, or Solid components.
3. On-Demand Hydration: Hydrate components on load, idle, or when visible.

Code Example

Below is an example of an Astro component:

const greeting = "Hello, Astro!";
console.log(greeting);