Astro

Definitions

1. Astro is a modern web framework designed for building fast, content-focused websites like blogs, documentation sites, marketing pages, and portfolios. Launched in 2022, Astro's defining feature is its Islands Architecture, which renders most of the page as static HTML at build time and only hydrates interactive components (islands) with JavaScript when needed. This approach delivers dramatically less JavaScript to the browser compared to traditional single-page application frameworks. Astro is framework-agnostic, allowing developers to use React, Vue, Svelte, Solid, or other UI component libraries within the same project, or write plain HTML with no framework at all. Content collections provide built-in support for Markdown and MDX with type-safe frontmatter. Astro supports static site generation (SSG), server-side rendering (SSR), and hybrid rendering modes. The result is excellent Core Web Vitals scores and fast page loads. Astro competes with Next.js, Gatsby, and Eleventy but differentiates itself through its content-first philosophy and minimal JavaScript approach.

   In plain English: A website-building tool that sends plain HTML by default and only loads JavaScript for the parts of the page that actually need to be interactive, making pages load much faster.

2. Astro's 'islands architecture' is its defining technical contribution: each interactive component (an island) hydrates independently, meaning a complex page can have one React widget and one Svelte widget coexisting without shipping either full framework to the client.

   Example: 'We rebuilt the marketing site in Astro and our Lighthouse score went from 45 to 98. The blog pages ship literally zero JavaScript.'

   Source: technical architecture

Related Terms

• Vite
• React
• SSR
• SSG
• Performance Budget
• Vue
• Vue.js