What Makes Astro Different

Astro takes a fundamentally different approach to building websites. While most modern frameworks ship a JavaScript runtime and hydrate the entire page on the client, Astro renders everything to static HTML at build time and sends zero JavaScript by default. You only add client-side JavaScript where you explicitly need interactivity.

This architecture, which Astro calls "Islands," means your content-heavy pages load instantly while interactive components hydrate independently. The result is websites that are dramatically faster than those built with traditional single-page application frameworks.

Creating Your First Project

Getting started with Astro takes just one command. The CLI walks you through project setup with sensible defaults.

npm create astro@latest my-website
cd my-website
npm run dev

Astro uses file-based routing. Any .astro file you create in the src/pages/ directory automatically becomes a route. The file src/pages/about.astro maps to /about, and src/pages/blog/index.astro maps to /blog.

Astro Components

Astro has its own component format that combines HTML templating with a frontmatter script section. The frontmatter runs at build time, so you can fetch data, import components, and define variables without any of that code reaching the browser.

---
const title = "My Website";
const posts = await fetch("https://api.example.com/posts").then(r => r.json());
---

<html>
  <head><title>{title}</title></head>
  <body>
    <h1>{title}</h1>
    <ul>
      {posts.map(post => <li>{post.title}</li>)}
    </ul>
  </body>
</html>

The code above the --- fence runs on the server during the build. Everything below is your template, which supports JSX-like expressions for dynamic content.

Using Your Favorite UI Framework

One of Astro's most compelling features is its framework-agnostic approach. You can use components from React, Vue, Svelte, Solid, or other frameworks within the same project. Install the integration and import components as you normally would.

npx astro add react

By default, framework components render to static HTML. To make them interactive on the client, you add a client directive:

  • client:load hydrates the component immediately when the page loads
  • client:idle hydrates when the browser is idle
  • client:visible hydrates when the component enters the viewport

This granular control over hydration is what enables Astro's performance advantage.

Content Collections

Astro's Content Collections provide a type-safe way to manage local content like blog posts and documentation pages. You define a schema for your content, and Astro validates it at build time and generates TypeScript types automatically.

Content can be written in Markdown, MDX, or Markdoc, making Astro an excellent choice for blogs, documentation sites, marketing pages, and any project where content is the primary focus. Combined with a headless CMS like Keystatic, you get a complete content management workflow with an outstanding developer experience.