Astro vs Gatsby — Static Site Showdown: Speed vs Ecosystem
Astro delivers near-instant performance with zero JS by default, while Gatsby's React-heavy approach feels like bringing a cannon to a knife fight.
Astro
Astro's partial hydration means you only ship JavaScript when you actually need it, cutting page weights by 50-90% compared to Gatsby's full React hydration. For content sites, that's the difference between a 95 Lighthouse score and endless optimization headaches.
Different Philosophies: Static Sites vs. Static Apps
Astro treats your site as static-first—it's a content delivery machine that only adds interactivity where you explicitly ask for it. Gatsby treats everything as a React app that happens to be pre-rendered, meaning you're always paying the React tax in bundle size and hydration overhead. If you're building a blog, documentation, or marketing site, Astro's approach is like using a scalpel; Gatsby's is like using a sledgehammer that requires constant maintenance.
Where Astro Wins
Astro's killer feature is zero JavaScript by default. You write components in React, Vue, Svelte, or plain HTML/JS, but Astro strips out all client-side JS unless you add a client:load directive. This means a typical Astro page ships under 10KB of JS, while Gatsby's baseline is 100KB+ just for React hydration. Astro also supports Markdown/MDX out of the box without plugins, and its built-in image optimization (astro:assets) handles responsive images without external dependencies. For performance-critical sites, Astro's approach is objectively faster and simpler.
Where Gatsby Holds Its Own
Gatsby still dominates for data-heavy applications that need real-time updates or complex client-side routing. Its GraphQL data layer is unmatched for pulling from multiple sources (CMS, APIs, databases) and transforming data at build time. If you're building an e-commerce site with dynamic product filters or a dashboard that needs client-side state, Gatsby's React foundation makes that easier. The plugin ecosystem (over 3,000 plugins) also means you can add almost any feature without writing custom code—though you'll pay for it in bundle bloat.
The Gotcha: Switching Costs and Plugin Hell
Moving from Gatsby to Astro means rewriting your data-fetching logic. Gatsby's GraphQL layer is convenient but proprietary; Astro uses standard fetch() or top-level await, which is simpler but requires manual work. Conversely, Gatsby's plugin dependency hell is real—updates break often, and you're at the mercy of maintainers. Astro's minimal plugin system (under 100 official integrations) means less magic but more stability. Also, Gatsby's incremental builds (via Gatsby Cloud) are faster for large sites, but they're a paid feature starting at $50/month, while Astro's build caching is free and built-in.
If You're Starting Today...
For a new content site (blog, portfolio, docs), use Astro. Install it via npm create astro@latest, drop your Markdown files in src/pages/, and you'll have a production-ready site in minutes. Deploy to Netlify or Vercel for free with sub-second builds. For a dynamic web app that needs real-time data (like a product catalog with live inventory), consider Gatsby—but be prepared to optimize bundle sizes aggressively. Most sites don't need Gatsby's complexity; Astro's simplicity is a feature, not a limitation.
What Most Comparisons Get Wrong
They treat these as equal alternatives, but they're not. Astro is a static site generator that prioritizes performance; Gatsby is a React framework that prioritizes developer experience. The real question isn't 'which is better?' but 'do you need a full React app?' If your answer is no, Astro saves you time, money, and user frustration. Gatsby's learning curve (GraphQL, plugins, hydration issues) adds weeks to a project, while Astro's 'just HTML' approach lets you ship faster.
Quick Comparison
| Factor | Astro | Gatsby |
|---|---|---|
| Default JS Bundle Size | 0 KB (no JS unless added) | 100 KB+ (React hydration required) |
| Build Time for 100 Pages | ~10 seconds (fast SSG) | ~30 seconds (GraphQL overhead) |
| Data Fetching | fetch() or top-level await (standard JS) | GraphQL layer (proprietary) |
| Plugin Ecosystem | <100 official integrations | 3,000+ community plugins |
| Image Optimization | Built-in (`astro:assets`) | Requires `gatsby-plugin-image` |
| Incremental Builds | Free (built-in caching) | $50/month (Gatsby Cloud) |
| Learning Curve | Low (HTML/CSS + optional JS frameworks) | High (React, GraphQL, plugin system) |
| Ideal Use Case | Content sites (blogs, docs, marketing) | Data-heavy apps (e-commerce, dashboards) |
The Verdict
Use Astro if: You're building a content-focused site where performance is non-negotiable and you want to avoid React overhead.
Use Gatsby if: You need a dynamic web app with complex client-side interactions and are willing to trade bundle size for Gatsby's data layer.
Consider: Next.js if you need server-side rendering (SSR) or hybrid static/dynamic rendering—it's more flexible than Gatsby for modern React apps.
Astro's **partial hydration** means you only ship JavaScript when you actually need it, cutting page weights by 50-90% compared to Gatsby's full React hydration. For content sites, that's the difference between a 95 Lighthouse score and endless optimization headaches.
Related Comparisons
Disagree? nice@nicepick.dev