Why switched to Astro

Mon Sep 08 2025

After trying different stacks, I switched to Astro to get the balance I want: a lean site that ships as little JavaScript as possible while keeping a great developer experience.

Highlights:

• Content-first: Markdown/MDX flows naturally into pages.
• Partial hydration: Only hydrate what truly needs interactivity.
• Island architecture: Keep the static parts static and ship fewer bytes.

What changed for me:

• Faster page loads and Lighthouse scores without heavy tweaking.
• Simpler routing and content collections compared to ad‑hoc setups.
• Easier theming and styling with Tailwind, no runtime overhead.

Astro lets me focus on writing and shipping, not wrestling with client-side complexity.

Island architecture in practice

With Astro, I can keep 90% of a page static and selectively hydrate interactive parts.

---
import Counter from "../components/Counter.jsx";
---

<Layout>
  <article>
    <h1>My page</h1>
    <!-- Static content stays static -->
    <p>Rendered at build time.</p>

    <!-- Hydrate only what needs it -->
    <Counter client:idle />
  </article>
</Layout>

Minimal configuration

Here’s how my Tailwind integration looks in astro.config.mjs:

import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  integrations: [tailwind()],
});

The end result: simpler pages, smaller bundles, better scores.