🚀 The BATS Stack

Bun • Astro • Tailwind • Svelte
aka “The Avengers of content-focused web dev” — but without the multi-billion-dollar budget.

hero

🥷 Bun — The Fast Runtime (but not the magic bullet here)

The internet told me Bun was blazingly fast.
So I tried it for my portfolio + blog.

Here’s the tea:

Yes, Bun is fast — especially for running JS/TS and installing packages.
But when you bring Astro into the picture, Bun is just the guy holding the door for Vite, who’s actually doing all the heavy lifting.
My tests?
- bun astro dev vs npm astro dev → 1ms difference. That’s the time it takes to blink slowly.

Translation: Bun didn’t slow me down, but it also didn’t give me the “0 to 100” moment I was hoping for.

shooom

🪐 Astro — Content-First & SEO-Friendly

Astro was the perfect fit for my portfolio and blog:

Why I love it:

Static data support → JSON, Markdown, even YAML if you’re feeling spicy.
SSR by default → Your SEO guy will finally stop giving you side-eye.
Islands Architecture → Only hydrates what needs hydration.
Feels like a microservice framework but for the frontend.

🎨 Tailwind — Utility-First Styling

Tailwind. The IKEA of CSS frameworks.
You don’t always know what the class names mean at first, but somehow you walk away with a beautiful room (or in this case, UI).

Facts:

Styling is fast.
Consistent design without fighting CSS.
Never touched a .css file — my entire styling life lived inside .astro and .svelte components.

🌀 Svelte — A Framework Worth Exploring

Thanks to Astro’s “mix and match” vibe, I decided to give Svelte a spin.

Here’s what happened:

For my small app, it didn’t feel that different from React or Vue.
But I loved the cleaner syntax and the “less boilerplate, more code that actually does stuff” approach.
Definitely want to try it again for something more complex.

📊 Benchmarks — Node/Vite vs Bun/Vite (Astro Project)

Setup	Dev Start Time	Build Time	Bundle Size (gzip)
npm astro dev (Vite)	~200ms	~800ms	16KB
bun astro dev (Vite)	~201ms	~802ms	16KB

What this means:

In this setup, Astro + Vite are the real speed controllers.
Bun’s special abilities aren’t flexing much here because it’s not doing the bundling.
If this were a race, both runners are crossing the finish line together… holding hands.

⚠️ Limitations to Consider

Bun → Doesn’t speed up Astro builds here; ecosystem still maturing.
Astro → Not the tool for giant SPAs with intense client-side routing.
Tailwind → Utility classes can feel like alphabet soup until you get the hang of it.
Svelte → Smaller ecosystem compared to React — fewer ready-made components.

🎯 Final Thoughts

The BATS stack is still a blast.
For blogs, portfolios, and static-first projects — this is a dream combo.
Bun might not turbocharge Astro’s build here, but it’s still a cool runtime worth exploring elsewhere.

If you want a modern, lightweight, SEO-friendly stack that’s fun to work with — go BATS.
I had a great time building with it, and I’ll keep experimenting.