Dev.to

Getting Started with Astro

What’s Astro? Astro is an open-source web framework created to build fast, performant, content-driven websites. What really sets Astro apart is its performance. As the Astro team puts it: "It should be nearly impossible to build a slow website with Astro." What makes this statement true is how Astro handles rendering and delivering your website. It prioritizes server-side rendering (SSR) and minimizes client-side JavaScript by default and the use of island architecture. Prioritizes server-side rendering (SSR) Astro's philosophy is: render on the server, ship minimal client-side JS. Static HTML Generation by Default: Astro components render to static HTML at build time. No JavaScript is sent to the browser unless you explicitly opt in. The Island Architecture Astro uses what’s called island architecture — a way to combine static HTML with interactive components... So what does that mean? Island architecture is a frontend rendering strategy where your webpage is mostly static HTML, but certain "islands" of interactivity are hydrated separately and only when needed. An island always runs in isolation from other islands on the page, and multiple islands can exist on a page. Client islands can still share state and communicate with each other, even though they run in different component contexts. By default, Astro will automatically render every UI component to just HTML & CSS, stripping out all client-side JavaScript automatically. These islands: Run independently of each other. Can still share state if needed. Only hydrate (i.e., load JavaScript) when you tell them to. Turning any static UI component into an interactive island requires only a client:\* directive. Astro then automatically builds and bundles your client-side JavaScript for optimized performance. --- import Counter from '../components/Counter.astro' import LoginForm from '../components/LoginForm.astro' --- Hello, Astro Astro offers several hydration directives to control how components behave: client:load: Hydrates the component immediately after the page loads. client:idle: Waits until the browser is idle, then hydrates the component. client:visible: Hydrates the component when it enters the viewport (lazy loading). client:media: Hydrates the component only when a specific media query matches. client:only: Does not render the component on the server—renders it only on the client. Getting Started with Astro To start a new Astro project, you'll need Node.js installed — version 18.17.1 or 20.3.0 or later. (v19 is currently not supported.) Step 1: Create Your Project Start by running the command: npm create astro@latest Choose the starter template you like or stick with the default. Follow the CLI prompts to configure your project. Step 2: Run the Dev Server npm install And then: npm run dev Your site should now be live at http://localhost:4321. Your file stucture should look like this: ├── public/ # Static assets like images, fonts, etc ├── src/ │ ├── components/ # Reusable components │ ├── layouts/ # Layout components to structure your pages │ └── pages/ # Astro pages that automatically become the routes of your website | # /pages/about.astro becuase the `/about` path └── astro.config.mjs # Configuration file for your Astro project Anatomy of an .astro File Astro components use the .astro file extension. Each file can include the following sections: 1- Frontmatter — for imports, variables, functions (between ---). 2-HTML/JSX-like syntax — for page structure and layout 3- Styles — scoped styles using tags 4- Scripts — optional blocks for browser-side logic --- // begin Frontmatter import Layout from '../layouts/MainLayout.astro'; import '../styles/utils.css'; const pageTitle = 'Homepage'; // end Frontmatter --- /* h1 will be blue in this page only without affecting the style of h1 that might be other pages*/ h1 { color: blue; } {pageTitle} document.body.style.backgroundColor = 'yellow'; The style tag accepts define:vars{{}}, whcih accepts an object of variables that could be used as CSS vars. --- const foregroundColor = "rgb(221 243 228)"; const backgroundColor = "rgb(24 121 78)"; --- h1 { background-color: var(--backgroundColor); color: var(--foregroundColor); } Hello World Using Slots and Props in Astro What Are Slots in Astro? If you've worked with React or Vue you should have an understanding of what slots (or childeren in React) mean. A slot is basically a placeholder for content that you pass into a component. It allows you to keep a consistent layout across multiple pages, while still injecting unique content where needed. Let’s take a look at a simple layout component that uses a slot: // layouts/Layout.astro --- import Header from "

Apr 21, 2025 - 19:32
 0
Getting Started with Astro

What’s Astro?

Astro is an open-source web framework created to build fast, performant, content-driven websites.

What really sets Astro apart is its performance. As the Astro team puts it:

"It should be nearly impossible to build a slow website with Astro."

What makes this statement true is how Astro handles rendering and delivering your website. It prioritizes server-side rendering (SSR) and minimizes client-side JavaScript by default and the use of island architecture.

Prioritizes server-side rendering (SSR)

Astro's philosophy is: render on the server, ship minimal client-side JS.

Static HTML Generation by Default:

  • Astro components render to static HTML at build time.
  • No JavaScript is sent to the browser unless you explicitly opt in.

The Island Architecture

Astro uses what’s called island architecture — a way to combine static HTML with interactive components... So what does that mean?

Island architecture is a frontend rendering strategy where your webpage is mostly static HTML, but certain "islands" of interactivity are hydrated separately and only when needed.

An island always runs in isolation from other islands on the page, and multiple islands can exist on a page. Client islands can still share state and communicate with each other, even though they run in different component contexts.

By default, Astro will automatically render every UI component to just HTML & CSS, stripping out all client-side JavaScript automatically.

These islands:

  • Run independently of each other.
  • Can still share state if needed.
  • Only hydrate (i.e., load JavaScript) when you tell them to.

Turning any static UI component into an interactive island requires only a client:\* directive. Astro then automatically builds and bundles your client-side JavaScript for optimized performance.

---
import Counter from '../components/Counter.astro'
import LoginForm from '../components/LoginForm.astro'
---

<html>
  <body>
    <h1>Hello, Astro</h1>

    
    <Counter client:load />
    <LoginForm client:visible />
  </body>
</html>

Astro offers several hydration directives to control how components behave:

client:load: Hydrates the component immediately after the page loads.
client:idle: Waits until the browser is idle, then hydrates the component.
client:visible: Hydrates the component when it enters the viewport (lazy loading).
client:media: Hydrates the component only when a specific media query matches.
client:only: Does not render the component on the server—renders it only on the client.

Getting Started with Astro

To start a new Astro project, you'll need Node.js installed — version 18.17.1 or 20.3.0 or later. (v19 is currently not supported.)

Step 1: Create Your Project

Start by running the command:

npm create astro@latest

Choose the starter template you like or stick with the default. Follow the CLI prompts to configure your project.

Step 2: Run the Dev Server 

npm install

And then:

npm run dev

Your site should now be live at http://localhost:4321.

Your file stucture should look like this:

├── public/          # Static assets like images, fonts, etc
├── src/
│   ├── components/  # Reusable components
│   ├── layouts/     # Layout components to structure your pages
│   └── pages/       # Astro pages that automatically become the routes of your website
|                    # /pages/about.astro becuase the `/about` path
└── astro.config.mjs # Configuration file for your Astro project

Anatomy of an .astro File

Astro components use the .astro file extension. Each file can include the following sections:

1- Frontmatter — for imports, variables, functions (between ---).
2-HTML/JSX-like syntax — for page structure and layout
3- Styles — scoped styles using

This site uses cookies. By continuing to browse the site you are agreeing to our use of cookies.