Astro Concepts

Note: For a comprehensive guide always refer to the Astro Docs - We'll only be breezing over some concepts that have a lil something to do with concepts you might need when using a Headless CMS.

Now, it's worth noting that we're pretty big fans of Astro at Dato - in fact, we moved our entire website to it quite recently (well, recently if you're here beginning of '25). We wrote about all the reasons behind it, so definitely warrants a dive!

So. If you’re here, you’ve probably heard the buzz about Astro's Island Architecture or its ability to ship zero JavaScript by default. It’s not just hype—Astro’s approach to building for the web is unique, performant, and downright fun. In many ways it brings back the joys of webdev in the early 2010s, but that's just our opinion.

So let's explore some of the key concepts that make Astro so special, keeping things simple and practical. If you need a deeper dive, you can always check out the Astro Docs. But for now, let’s look at some core concepts worth knowing about.

WTF are Astro Islands?

Astro’s Island Architecture is kind of genius. Traditional SPAs ship a ton of JavaScript up front, even for static parts of the site. Astro flips that logic on its head: only the dynamic, interactive parts of your site get JavaScript—and only when they need it. Otherwise you're just shipping compiled HTML and CSS to keep things ultra light.

Let's stretch the islands analogy. Think of your page as an ocean, and the interactive components (like a carousel or a search bar) as tiny little islands. Astro renders everything server-side, leaving plain HTML for most of your site, and hydrates just those "islands" of interactivity in the browser. The result? A blazing-fast site with the minimal JavaScript your users deserve.

PS: We "stress-tested" 4 frameworks to see how they performed head to head - so check out our dive into how Astro performed when building a static site with 10K blog posts.

What's "Zero JS by Default"?

Astro ships zero JavaScript unless you tell it otherwise. This means your site is as lean as possible by default. If you don’t need interactivity, Astro won’t make your users download a single kb of unnecessary JS.

Need an interactive component? Wrap it in a framework like React, Svelte, or Vue, and Astro will hydrate it only when it’s needed. Want even more control? You can define hydration strategies like "load", "idle", or "visible" to decide when and how the JavaScript gets loaded.

<Button client:visible />

For example 👆 Astro will only hydrate the button when it's scrolled into view thanks to the client:visible directive.

Partial Hydration

(This is me being cheeky with my SEO stuffing 🤭)

Yes. This is just more of "Zero JS by default".

Anyways.

Astro's Collections API

If you’re working with a lot of content—think 1000s of blog posts or products—the Collections API is incredible. It lets you define schemas, validate content, and organize data effortlessly.

1
import { defineCollection } from 'astro:content';
2

3
export const collections = {
4
  blog: defineCollection({
5
    schema: {
6
      title: "string",
7
      date: "date",
8
      description: "string",
9
    },
10
  }),
11
};

The Collections API allows for content to be structured and validated, and not just stored.

What is Astro IntelliSense?

As much as it sounds like a bloated feature in some AI-powered washing machine that needs an app and uses up 3GB+ data a day because hey, wash cycles are DLCs now, Astro IntelliSense is anything but.

It's actually useful.

IntelliSense provides autocompletion and validation while writing content. If you’ve defined schemas in astro:content, IntelliSense suggests field names, types, and values directly in your editor.

For example, when creating a new Markdown blog post, you’ll get suggestions for required frontmatter fields like title or date. It’s like having a CMS validation layer directly in your code editor, reducing errors and speeding up your workflow.

Frontmatter in Astro

You're probably familiar with how metadata is handled usually in frontmatter, but Astro does things slightly differently. Whether you’re working with Markdown files or .astro components, frontmatter lets you define page-specific properties like titles, descriptions, and dates.

In Markdown, it looks like this:

---
title: "Am I having a midlife crisis?"
date: 2025-01-10
description: "I think so. I went ceramic paining."
---

In .astro files, you can use a <script> block for the same purpose:

---
export const frontmatter = {
  title: "Am I having a midlife crisis?",
  description: "I think so. I went ceramic paining.",
};
---

Frontmatter here isn’t just about organization—it powers dynamic routing, SEO metadata, and even page templates. It’s the connection that keeps your content structured and flexible.

What are Astro Slots?

Slots are Astro’s way of making reusable components even more powerful. A slot is a placeholder that allows you to inject content into a component without rigidly defining which elements need to be in there every time.

For example, imagine a Card.astro component:

<article>
  <slot />
</article>

You can use this component and define the content dynamically:

<Card>
  <h2>Header</h2>
  <p>Give it a spin</p>
</Card>

Slots keep your code modular and flexible, perfect for building reusable design systems.

Astro Aliases

With aliases, you can ditch long relative paths and make your imports waaay more readable (out of the box). Instead of:

import Component from '../../../../../../../../../../components/Button.astro';

just set up an alias

alias: {
  '@components': './src/components',
}

And then all you'll need to do is a simple

import Button from '@components/Button.astro';

Easy.

Astro Adapters

One of the standout features of Astro is its... 🥁... Adaptability—sorry. Astro adapters allow you to deploy your site to almost any platform, from serverless environments like Vercel and Netlify to edge platforms like CF Workers or traditional hosting setups. These adapters take care of the heavy lifting, ensuring your Astro project runs smoothly on your preferred hosting solution.

Here’s how it works. Astro generates HTML by default. But what if you want dynamic server-side rendering (SSR) or specific configurations for a platform? That’s where adapters come in. Each adapter customizes Astro’s output to match the requirements of your hosting platform.

Just npm an adapter like @astrojs/netlify and update your config and deploy!

Astro will generate output optimized for the deployment platform you're using. Adapters let you focus on your content instead of worrying about platform-specific quirks.

Need edge rendering for global users? Use the Cloudflare Workers adapter.

Running a simple blog? Stick with the SSG adapter.

Building dynamic dashboards? Go with the Vercel or Node.js adapter for SSR.

Astro Scripts

Astro’s approach to scripts is all about balance: you get the power of JavaScript without drowning your users in unnecessary downloads. Whether you need inline scripts for performance, external scripts for modular stuff, or conditional loading for interactivity, Astro gives you full control.

Astro makes it easy to define when and how scripts load, thanks to its flexible directives to maintain its' zero-JS approach. Some cool examples are:

client:load: Loads the script immediately after the page loads.

client:idle: Waits until the browser is idle to load the script.

client:visible: Loads the script when the component is visible in the viewport.

Looking at astro:actions

Astro’s astro:actions feature allows you to handle forms on the server without needing client-side JavaScript. You can define custom actions in your server endpoints, which are triggered when a form is submitted. This keeps your forms lightweight and ensures the UX remains seamless.

<form method="POST" action="/api/contact">
  <input type="text" name="name" required />
  <button type="submit">Submit</button>
</form>

For example, if you’re building a contact form, you can process the form submission directly on the server for better performance and security, and return feedback without needing a client-side framework.

Understanding astro:assets

The astro:assets module allows you to optimize and manage images dynamically without needing any external service like a DAM to life the load on your optimization needs, which is nifty if you happen to be using a CMS that doesn't handle this out of the box (cough* cough* we do).

Whether you need to resize, crop, or convert images to different formats, astro:assets handles it all during build time, ensuring your end website remains fast and efficient.