What is Astro? — Astro Tutorial

Astro is a web framework built around a simple bet: most pages don't need much JavaScript, so ship none by default. You write components using an HTML-like syntax, Astro renders them to plain HTML at build time (or request time), and the browser receives markup and CSS — no framework runtime, no hydration, no JavaScript bundle — unless you explicitly ask for it.

That's a different starting point than something like Next.js or a typical single-page app, where every page ships a JavaScript bundle to hydrate the React tree, even if the page is just static text and images. Astro flips the default: static HTML unless you opt in to interactivity, piece by piece.

Content-first, not app-first

Astro was designed for content-heavy sites — blogs, marketing pages, documentation, portfolios — where the bulk of the page is words and images, and only a few widgets (a search box, a like button, an image carousel) actually need to run code in the browser. For that kind of site, shipping a full JavaScript framework to render text is pure waste: bytes the visitor downloads and parses for no benefit.

---
// This runs on the server (or at build time) — never in the browser.
const pageTitle = "Welcome to my blog";
---

<html>
  <body>
    <h1>{pageTitle}</h1>
    <p>This entire page ships as plain HTML. No JavaScript required.</p>
  </body>
</html>

Nothing in that example runs client-side. The const pageTitle line executes once, while the page is being built, and its result gets baked directly into the HTML the browser receives.

Bring your own framework

Astro doesn't force you to abandon React, Vue, Svelte, or another UI library — it lets you use them, but only where you need interactivity. This is Astro's islands architecture, which later lessons cover in depth: static HTML is the ocean, and interactive components are small islands of hydrated JavaScript dropped into it. A page can mix an .astro component, a React component, and a Svelte component side by side, and only the ones that need to run in the browser actually do.

Where Astro fits

Astro isn't a replacement for Next.js or Remix in every case — it's a different tool for a different shape of problem:

Reach for Astro when a site is mostly content with a handful of interactive widgets: blogs, docs, marketing sites, portfolios.
Reach for Next.js (or a similar full app framework) when most of the page is interactive and stateful: dashboards, editors, anything that behaves like an application rather than a document.

Astro can still render dynamic, per-request pages (covered later in this course), and it can hand off entire routes to a full app if needed — but its default posture, and the reason it exists, is sending less JavaScript to the browser.

Content-first, not app-first

---
// This runs on the server (or at build time) — never in the browser.
const pageTitle = "Welcome to my blog";
---

<html>
  <body>
    <h1>{pageTitle}</h1>
    <p>This entire page ships as plain HTML. No JavaScript required.</p>
  </body>
</html>

Nothing in that example runs client-side. The const pageTitle line executes once, while the page is being built, and its result gets baked directly into the HTML the browser receives.

Bring your own framework

Where Astro fits

Astro isn't a replacement for Next.js or Remix in every case — it's a different tool for a different shape of problem:

Reach for Astro when a site is mostly content with a handful of interactive widgets: blogs, docs, marketing sites, portfolios.

Reach for Next.js (or a similar full app framework) when most of the page is interactive and stateful: dashboards, editors, anything that behaves like an application rather than a document.