Skip to main content

​
Introduction to Astro

Astro is the all-in-one web framework designed for speed. Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries.

Quick start

Get up and running with Astro in minutes

Core concepts

Learn the fundamental concepts behind Astro

Integrations

Extend Astro with React, Vue, Tailwind, and more

API reference

Explore the complete Astro API documentation

​
What is Astro?

Astro is a website build tool for the modern web that combines powerful developer experience with lightweight output. Unlike traditional frameworks that ship all your JavaScript to the browser, Astro takes a different approach:
Astro renders your entire site to static HTML during the build process. This means zero JavaScript is sent to the browser by default, resulting in faster page loads and better performance.
Bring your own UI framework. Astro supports React, Preact, Svelte, Vue, Solid, Lit, Alpine, and more. You can even mix multiple frameworks in the same project.
Need interactivity? Astro’s Islands architecture allows you to selectively hydrate only the interactive components on your page, keeping the rest static HTML.
Astro is designed for content-rich websites like blogs, marketing sites, documentation, portfolios, and e-commerce sites. Built-in features like Content Collections make managing content a breeze.

​
Key features

Astro comes packed with features that help you build faster websites with less effort:

​
Component islands

Astro pioneered the Islands architecture pattern. Instead of shipping your entire application as JavaScript, Astro renders your site to static HTML and only hydrates the interactive components you specify. 
---
import Header from '../components/Header.astro';
import InteractiveButton from '../components/InteractiveButton.jsx';
---

<Header />
<!-- This React component becomes interactive in the browser -->
<InteractiveButton client:load />

​
UI framework agnostic

Use your favorite UI framework or mix and match multiple frameworks in the same project: 
// components/Counter.jsx
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

​
Content collections

Manage your content with type-safe collections. Perfect for blogs, documentation, and product catalogs: 
// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.date(),
    author: z.string(),
  }),
});

export const collections = { blog };

​
Server-first API design

Astro moves expensive rendering work off your visitors’ devices by rendering on the server. This results in faster initial page loads and better SEO: 
---
// This code runs on the server during build or on-demand
const response = await fetch('https://api.example.com/data');
const data = await response.json();
---

<div>
  {data.items.map(item => (
    <article>{item.title}</article>
  ))}
</div>

​
Built-in optimizations

Astro automatically optimizes your site:
  • Image optimization: Automatic image optimization and lazy loading with the <Image> component
  • Code splitting: Automatic code splitting for optimal bundle sizes
  • CSS scoping: Scoped CSS by default, no CSS-in-JS required
  • Asset bundling: Intelligent asset bundling powered by Vite

​
Flexible deployment

Deploy anywhere:

Static (SSG)

Build to static HTML and deploy to any static host

Server (SSR)

Render on-demand with server-side rendering

Hybrid

Mix static and server-rendered pages in one project

​
How Astro works

At its core, Astro is a static site generator with optional dynamic capabilities:
1

Write components

Create pages and components using .astro files or your favorite UI framework
2

Build process

Astro renders everything to static HTML at build time, extracting and optimizing CSS and JavaScript
3

Selective hydration

Interactive components are hydrated in the browser only when needed, using client directives like client:load or client:visible
4

Deploy anywhere

Deploy the optimized output to any static host or use SSR adapters for dynamic rendering

​
When to use Astro

Astro excels at building content-focused websites:
Marketing sites and landing pages
Blogs and documentation sites
Portfolios and showcase sites
E-commerce storefronts
Multi-page applications (MPAs)
Astro may not be the best choice for:
Single-page applications (SPAs) that require extensive client-side routing
Real-time applications like chat apps or collaborative editors

​
Next steps

Ready to start building with Astro?

Installation

Install Astro and set up your development environment

Quick start tutorial

Build your first Astro project in minutes

Build docs developers (and LLMs) love

Get started for freeTalk to us