# What Is Astro JS? A Beginner's Guide to the Astro Framework

> What is Astro JS? Learn how the Astro framework works, what islands and SSR mean, when to use it and how to deploy your first Astro site in 2026.

You built a simple marketing site. It has a homepage, a pricing page and a blog. Then you run a speed test and find the browser downloading a full JavaScript app just to show paragraphs of text.

That mismatch is the problem **Astro JS** was built to solve. Most of the web is content that people read. Yet many popular frameworks treat every page like an interactive app. If you want a refresher on why that JavaScript weight matters, our guide on [**what JavaScript is**](/what-is-javascript-beginner-guide/) covers the basics.

This guide explains what Astro is in plain terms. You will learn how it works, what "islands" mean, when Astro is the right pick (and when it isn't) and how to build and host your first Astro site.

## TL;DR (Too Long, Didn't Read?)

Short on time? Here is the whole guide in a few lines:

- **Astro is an open-source web framework for content-driven websites** such as blogs, docs, marketing sites and online stores.
- **It ships zero JavaScript by default.** Pages render to plain HTML. You add JavaScript only to the parts that need it.
- **Interactive parts are "islands."** You can write them in React, Vue, Svelte, Solid or Preact, all in one project.
- **Pages are static by default.** Add an adapter and Astro can also render pages on demand on a server (SSR).
- **Astro is free and MIT-licensed.** Cloudflare has backed the project since January 2026. Astro still deploys to any host.
- **It is not the best fit for every project.** Heavy app dashboards with live state on every screen often suit Next.js or SvelteKit better.
- **Hosting is simple.** A static Astro site is a folder of files; an SSR site runs as a Node.js process on any server.

## What Is Astro JS?

**Astro is a JavaScript web framework that builds fast, content-focused websites by rendering pages to HTML on the server and sending as little JavaScript to the browser as possible.** People call it "Astro JS" or "Astro.js" in search. The project's official name is simply Astro.

Think of a typical React single-page app as a brochure that arrives as a box of parts. The visitor's browser has to assemble it before anyone can read a word. Astro hands over the brochure already printed. If one page needs a working calculator or a signup form, Astro glues just that small piece onto the printed page.

Astro's own docs describe it as **server-first** and **fast by default**: rendering happens on the server where possible. Client-side JavaScript is opt-in rather than automatic.

### A Few Things Worth Knowing

- Astro started in 2021 as a reaction to sites built like apps when they only needed to show content.
- The Astro team reported close to **1,000,000 npm downloads per week** when it announced the Cloudflare move in January 2026.
- According to that same announcement, companies like **Webflow, Wix, Microsoft and Google** use Astro for sites and developer platforms.
- Astro **7.0** shipped on June 22, 2026 with a Rust-based compiler and Vite 8. The current release is **Astro 7.4** (October 15, 2026).

### Astro at a Glance

| **Factor** | **Astro** |
|---|---|
| **Type** | Web framework for content-driven sites |
| **License** | Open source, MIT |
| **First released** | 2021 |
| **Current version** | 7.4 (October 2026) |
| **Backing** | Cloudflare (since January 2026), platform-agnostic |
| **Runtime needed to build** | Node.js 22.22.0 or higher (even-numbered releases) |
| **Default output** | Static HTML, prerendered at build time |
| **Optional output** | On-demand rendering (SSR) through an adapter |
| **UI frameworks** | React, Vue, Svelte, Solid, Preact and more, mixed freely |
| **Best for** | Blogs, docs, marketing sites, portfolios, content-led stores |

If you only remember one line: **Astro renders HTML first and adds JavaScript only where you ask for it.**

## How Astro Works: The 5 Ideas Behind It

Astro feels unfamiliar for about an hour. After that, the whole framework rests on five ideas.

### 1. Astro Components (`.astro` Files)

An Astro component is an HTML template with a small code section on top, fenced by three dashes. Code inside the fence runs on the server at build time (or at request time with SSR). It never reaches the visitor's browser.

```astro
---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';
import Counter from '../components/Counter.jsx';

const title = 'Hello, Astro';
---
<Layout title={title}>
  <h1>{title}</h1>
  <p>This paragraph ships as plain HTML with no JavaScript.</p>
  <Counter client:visible />
</Layout>
```

If you know HTML, you can read this. The heading and paragraph become static HTML. Only the `Counter` component turns interactive. It does so only because of the `client:visible` directive.

### 2. Islands Architecture

This is the idea Astro is best known for. **An island is an interactive component that loads its own JavaScript separately from the rest of the page.** Everything around it stays static HTML.

You decide when each island wakes up with a client directive:

| **Directive** | **When the island loads its JavaScript** |
|---|---|
| `client:load` | As soon as the page loads |
| `client:idle` | When the browser finishes its main work and goes idle |
| `client:visible` | When the visitor scrolls the component into view |
| `client:media` | When a CSS media query matches (for example, mobile only) |
| `client:only` | Renders in the browser only and skips the server render |

A product page with one "Add to cart" button and a long description is the classic case. The description costs nothing. The button costs only its own small bundle. The official [**Astro islands documentation**](https://docs.astro.build/en/concepts/islands/) walks through more examples.

### 3. Server Islands

Server islands are the dynamic twin of client islands. Add `server:defer` to a component and Astro renders it on the server separately from the page, showing fallback content until it arrives.

That lets you cache a fast static page while still showing a personalized piece, such as a logged-in user's avatar or a cart count. Server islands need on-demand rendering. That means they require an adapter (more on that below).

### 4. Content Collections

Most Astro sites revolve around content: posts, docs pages, case studies, products. **Content collections** group that content and check it against a schema you define with Zod.

Astro's built-in loaders read local Markdown, MDX, Markdoc, JSON, YAML and TOML files. Loaders for remote sources pull content from a CMS, a database or an API. If a post is missing a required field like its publish date, Astro stops the build and tells you which file broke. You catch the mistake before your readers do.

### 5. Static by Default, Server When You Need It

Out of the box, Astro prerenders every page into static HTML at build time. The result is a `dist/` folder that any web server can serve.

When a page needs fresh data on every request (a search page, a dashboard, a form that writes to a database), you switch on **on-demand rendering**. You install an adapter, then either:

- add `export const prerender = false` to the pages that should render per request, or
- set `output: 'server'` in your config and mark the static pages with `export const prerender = true`.

Astro's official adapters cover **Node.js, Netlify, Vercel and Cloudflare**. The [**on-demand rendering guide**](https://docs.astro.build/en/guides/on-demand-rendering/) lists the details. The Node adapter is the one that lets you run Astro on any server you control.

## What Is Astro Good For (and When Should You Skip It)?

Astro is great at one job: getting content in front of readers fast. The honest take is that this focus is also its limit.

| **Project type** | **Astro fit** | **Why** |
|---|---|---|
| Blog or magazine | Excellent | Mostly text and images; content collections handle posts |
| Documentation site | Excellent | Starlight, Astro's docs theme, is built for it |
| Marketing or landing pages | Excellent | Fast first load helps both SEO and conversions |
| Portfolio or agency site | Excellent | Static pages with a few interactive touches |
| Content-led online store | Good | Static catalog plus islands or server islands for the cart |
| CMS-powered site | Good | Works with headless CMSs and with EmDash (a CMS built on Astro) |
| SaaS dashboard behind a login | Weak | Every screen is interactive; an app framework fits better |
| Real-time collaborative app | Weak | Constant client state is not what Astro optimizes for |

Rule of thumb: **if most of your pages exist to be read, Astro is a strong default. If most of your pages exist to be clicked, dragged and updated live, pick an app framework.** Our [**Next.js hosting**](/nextjs-hosting/) page covers that path.

### Astro vs Next.js vs WordPress in One Table

Beginners usually compare Astro with these two. Here is the short version.

| **Factor** | **Astro** | **Next.js** | **WordPress** |
|---|---|---|---|
| **Built for** | Content-driven sites | Full-stack React apps | Content sites with a visual admin |
| **JavaScript sent by default** | None | A React runtime on every page | Depends on theme and plugins |
| **Editing content** | Code, Markdown or a connected CMS | Code or a connected CMS | Built-in dashboard |
| **Learning curve** | Low if you know HTML | Moderate (React required) | Low for editors, higher for custom code |
| **Runs on** | Static files or Node.js | Node.js (or static export) | PHP and MySQL |

The trade-off with WordPress is the editing experience. Astro gives developers speed and control, while WordPress gives non-technical editors a familiar dashboard. Not sure which side your site falls on? Our free [**WordPress to Astro Assessment**](/tools/wp-to-astro/) tells you whether a full rebuild, a hybrid setup or staying on WordPress makes sense.

## How to Start Your First Astro Project

You can have an Astro site running locally in about five minutes. The [**official install guide**](https://docs.astro.build/en/install-and-setup/) has every option. This is the fast path.

### Step 1: Install Node.js

Astro 7 needs **Node.js 22.22.0 or higher**. Astro does not support odd-numbered Node releases such as v23. Run `node -v` in your terminal to check. If you are new to Node, our guide on [**what Node.js is**](/what-is-node-js-beginners-guide/) explains the runtime and npm.

### Step 2: Create the Project

Run the setup wizard:

```bash
npm create astro@latest
```

It asks for a folder name and offers starter templates. A blog template is a good first choice because it already includes content collections.

### Step 3: Start the Dev Server

```bash
cd my-astro-site
npm run dev
```

Open `http://localhost:4321` in your browser. Edit a file in `src/pages/` and the page updates as you save.

### Step 4: Learn the Folder Structure

- `src/pages/`: every file here becomes a route (`about.astro` becomes `/about`)
- `src/components/`: reusable `.astro` components and UI framework components
- `src/layouts/`: shared page shells like headers and footers
- `public/`: files copied as-is, such as `robots.txt` and favicons
- `astro.config.mjs`: integrations, adapters and site settings

Want React or Vue islands? Run `npx astro add react` (or `vue`, `svelte` and so on) and Astro wires up the integration for you.

### Step 5: Build for Production

```bash
npm run build
```

Astro writes the finished site to `dist/`. Run `npm run preview` to check the production build locally before you deploy it.

## Beginner Tips That Save You a Rebuild Later

### Tip 1: Start With Zero Client Directives

Build the page as pure HTML first. Add `client:*` only when a component needs to respond to the visitor. Many sites need fewer islands than their developers expect.

### Tip 2: Prefer `client:visible` Over `client:load`

A carousel at the bottom of the page does not need to load before the headline. `client:visible` waits until the visitor scrolls to it.

### Tip 3: Define Schemas for Every Collection

A schema turns "my blog post silently lost its date" into a build error with a file name. Set one up on day one, not after the first broken page.

### Tip 4: Decide Static vs SSR Before You Pick a Host

A fully static site can live almost anywhere. Once you add on-demand pages or server islands, you need a host that can run a server process. Choosing late means migrating twice.

### Tip 5: Pin Your Node Version

Use the same Node version locally and on your server. Mismatched versions cause most "it builds on my laptop" failures.

### Tip 6: Read the Upgrade Guide Before Major Versions

Astro 7 replaced the Go-based compiler with a Rust one. The new compiler is stricter about unclosed HTML tags. Read the official upgrade guide before a major version bump, not after a failed deploy.

## Where to Host Your Astro Site

How you host Astro depends on one question: **does every page render at build time or do some pages render on request?**

**Static Astro sites** are folders of HTML, CSS and images. Free static hosts like Netlify, Vercel, Cloudflare and GitHub Pages serve these well. For a personal blog with no server code, that is a fine place to start. Our comparison of [**shared hosting, VPS and cloud hosting**](/shared-hosting-vps-or-cloud-hosting/) helps if you are weighing bigger options.

**SSR Astro sites** need a running server. With the Node adapter in standalone mode, your Astro build becomes a Node.js process that listens on a port, the same as any other Node app.

The catch nobody mentions on day one: platform free tiers have limits. Usage-based bills can climb as traffic grows. Your Astro site also rarely lives alone. It usually sits next to a WordPress blog, an API, a database or a CMS, each one on a different platform with its own bill and dashboard.

### Run Astro on a Server You Control With xCloud

xCloud runs your Astro site on a real server: one we manage for you or a VPS you already own at DigitalOcean, Vultr, Hetzner, AWS and other providers. One detail worth sharing: **xcloud.host itself is built on Astro.**

Here is what that looks like in practice:

1. **Connect your Git repository** and pick the branch to deploy. Every push can trigger a new build. 👉 [**How to deploy Git projects in one click with xCloud**](/docs/deploy-git-projects-in-one-click-with-xcloud/)
2. **For a static Astro site**, set the deploy script to run `npm run build` and serve the `dist/` folder. 👉 [**How to auto-deploy a static website from GitHub on xCloud**](/docs/auto-deploy-static-website-github-xcloud/)
3. **For an SSR Astro site**, deploy it as a Node.js app with the Node adapter. Set your Node version to 22.22.0 or higher. 👉 [**How to change the Node version with xCloud**](/docs/how-to-change-node-version-with-xcloud/)
4. **Attach your domain** and let xCloud issue and renew free SSL, with backups and monitoring on from the first deploy.

Because a plan is a server rather than a single site, your Astro site can share it with a WordPress install, an API or an [**EmDash CMS**](/emdashcms-hosting/) instance. You pay one flat monthly price with no per-request billing.

The honest trade-off: if you only ever ship one small static site, a free static host takes less setup. xCloud earns its place once you run SSR pages, several projects or client sites.

**Ready to deploy? Start with [Node.js Hosting on xCloud](/node-js-hosting/) or connect your own server free with [Self-Managed Hosting](/self-managed-hosting/) (1 server and 10 sites at no cost).** Prefer we run the server for you? See [**xCloud Managed Hosting**](/managed-hosting/).

## Build Your First Astro Site This Week

Astro is built for one job. It turns content into fast HTML and keeps JavaScript out of the way until a component needs it. For blogs, docs, marketing sites and content-led stores, that makes it one of the simplest ways to ship a quick site in 2026.

This week, run `npm create astro@latest`, pick the blog template and publish three pages. Decide early whether you need SSR. That one choice shapes your adapter, your host and your bill.

If you already run a WordPress site, take the [**WordPress to Astro Assessment**](/tools/wp-to-astro/) before you plan a rebuild. It takes a few minutes and tells you whether the move is worth it.

If you have found this blog helpful, feel free to [**subscribe to our blogs**](/blog/) for valuable tutorials, guides, knowledge and tips on web hosting and server management. You can also join our [**Facebook community**](https://www.facebook.com/groups/xcloud.community) to share insights and engage in discussions.

## Frequently Asked Questions

### Is Astro JS free?

Yes. Astro is open source under the MIT license. You can use it for personal and commercial projects at no cost. The Astro team confirmed in January 2026 that it stays free and open source after joining Cloudflare.

### Is Astro a frontend or backend framework?

Mostly frontend, with server features. Astro builds the pages your visitors see. Its code fences run on the server. With an adapter it can also handle API endpoints, forms and on-demand pages.

### Is Astro better than React?

They do different jobs. React is a UI library for building interactive components; Astro is a site framework that can use React components inside islands. Many teams use both: Astro for pages and React for the interactive parts.

### Is Astro good for SEO?

Yes, for most content sites. Pages arrive as complete HTML. Search engines can read them without running JavaScript. Lighter pages also tend to load faster. Good content and site structure still matter more than the framework.

### Does Astro only work on Cloudflare?

No. Astro states it stays platform-agnostic and keeps supporting deployment targets beyond Cloudflare. You can deploy static builds anywhere and SSR builds to any server that runs Node.js, including [**xCloud Node.js Hosting**](/node-js-hosting/).

### Do I need to know JavaScript to use Astro?

Basic HTML and CSS get you surprisingly far, since `.astro` files extend HTML. You will want some JavaScript once you fetch data, build islands or use content collections. Our [**JavaScript beginner guide**](/what-is-javascript-beginner-guide/) is a good starting point.

### I run a WordPress site. Should I move it to Astro?

It depends on how your site uses WordPress. Content-heavy sites with few plugins often gain speed from Astro, while membership sites, complex WooCommerce stores or teams that rely on the WordPress editor usually do better staying on [**managed WordPress hosting**](/hosting-for-wordpress/). Our free [**WordPress to Astro Assessment**](/tools/wp-to-astro/) recommends a full rebuild, a hybrid setup or staying on WordPress in a few minutes.