Why Astro Is My Go To for Content Websites

Most websites just show content. They don't need much interactivity like homepages, landing pages and portfolios. You could build them with plain HTML, CSS and JS, but as soon as the site grows that gets messy fast. That's where Astro comes in. And it's my go to for exactly this kind of website.

It is Simple

Most frameworks have a steep learning curve. You need to learn their own way of doing things, how they structure projects, their specific APIs, how to fetch data. It's a lot before you've even written a single line of your actual website.

Astro is different. You still need to learn how it works, but it never feels foreign. Components are just HTML, CSS and JS with a little frontmatter on top:

---
const title = "Hello"
---

<h1>{title}</h1>

<style>
  h1 { color: red; }
</style>

No special syntax to memorize. No weird abstractions. If you know how to write a webpage, you already know most of Astro.

It is Fast

Astro ships zero JavaScript by default. When you build your site you're serving plain HTML and CSS. It's fast out of the box without you having to think about it.

If you fetch data, it happens at build time (this only applies to fetching in the frontmatter. Anything inside a client:load component or a <script> tag runs in the browser like normal JavaScript). The data gets baked into the HTML before it ever reaches the user. No loading spinners, no client side fetching, just content that's already there.

---
const response = await fetch('https://your-cms.com/api/posts')
const posts = await response.json()
---

{posts.map(post => (
  <h2>{post.title}</h2>
))}

The browser receives a plain HTML file with the content already in it. No JavaScript needed.

But what if you need interactivity? Astro has something called Island Architecture. Instead of shipping JavaScript for the whole page, you only ship it where you actually need it. For framework components like React or Vue (more on it later) you add a client:load directive. For simple interactions you just use a <script> tag.

---
import Counter from './Counter.tsx'
---

<h1>My Page</h1>

<!-- ships javascript only for this component -->
<Counter client:load />

<script>
  // simple vanilla javascript
  document.querySelector('button').addEventListener('click', () => {
    console.log('clicked')
  })
</script>

The rest of the page stays pure HTML. You only pay the JavaScript cost where you actually need it.

And here's where Astro gets really flexible. You're not locked into one way of building components. You can bring React, Vue, Svelte, Solid, whatever you're comfortable with. That means you have access to their entire ecosystems too. Want to use shadcn components? Use React. Prefer a Vue UI library? That works too. You're not forced to learn a new component model just because you chose Astro.

For most content websites static is perfect. But when you need dynamic data like a dashboard, user specific content, or a frequently changing feed, you can add an adapter. Adapters like the Node adapter switch Astro from static to server side rendered. Instead of fetching data at build time, the server fetches it fresh every time a user visits and sends them the result.

Wrapping up

There's a lot more to Astro than what I covered here I just wanted to share some points why it is my go to for content websites. It's simple, it's fast, and it never gets in my way.

Have a nice day :)