Why I Chose Astro for My Personal Site

After years of using various frameworks for personal projects, I finally settled on Astro for my website. Here’s why.

The Problem with Traditional Frameworks

Most modern frameworks ship tons of JavaScript to the client. For a content-focused site like a personal blog or portfolio, this is overkill.

• React: ~150KB bundle size
• Next.js: Even larger with hydration
• Vue: ~80KB

For sites that are mostly static content, why ship all this JavaScript?

Enter Astro

Astro takes a different approach: zero JavaScript by default. It only ships JavaScript when you explicitly need it.

Key Benefits

1. Performance

• Lighthouse scores of 100 across the board
• Sub-second page loads
• No hydration overhead

2. Islands Architecture

• Interactive components only where needed
• Rest of the page is pure HTML
• Framework-agnostic (use React, Vue, Svelte together!)

3. Developer Experience

• .astro components are intuitive
• Markdown/MDX support out of the box
• TypeScript support
• Excellent docs

My Experience

Building this site with Astro was a joy:

---
import Header from '../components/Header.astro';
const posts = await getCollection('blog');
---

<Header />
<main>
  {posts.map(post => (
    <article>
      <h2>{post.data.title}</h2>
      <p>{post.data.description}</p>
    </article>
  ))}
</main>

Simple, clean, and fast.

Should You Use Astro?

Astro is perfect if:

• Your site is content-focused
• You want great performance
• You don’t need heavy client-side interactivity

Not ideal if:

• You’re building a complex web app
• You need lots of client-side state
• Real-time features are core to your product

Conclusion

For my personal site—showcasing projects, writing blog posts, and sharing stories—Astro hits the sweet spot of performance and developer experience.

Give it a try: astro.build