The Problem
Our original site was built with Next.js 14. It was fine — but every page shipped ~200KB of JavaScript whether it needed it or not. For a content site about street food, that’s absurd. Nobody needs React hydration to read about noodles.
The Switch to Astro
Astro’s philosophy is simple: zero JavaScript by default. You can add interactive components (React, Vue, Svelte) where needed through “Islands” — and the rest of the page is pure HTML and CSS.
// Only this component ships JS to the browser
<ChinaMap client:load />
// Everything else is static HTML
<h1>China Street Eats</h1>Results
| Metric | Next.js | Astro |
|---|---|---|
| JS per page | ~200KB | ~3KB |
| Lighthouse score | 72 | 98 |
| Build time | 12s | 1.5s |
| Pages | 30 | 60+ |
What Worked
- Content Collections — Type-safe MDX with Zod schemas
- Sitemap + RSS — Built-in, zero config
- Vercel/Cloudflare deploy —
output: 'static'just works - Tailwind + inline styles — No runtime CSS-in-JS
The best part? The site feels faster because there’s nothing to hydrate. Click a link, page loads. That’s it.
