Nuxt vs Gatsby — The Framework That Actually Scales Wins
Nuxt's server-side rendering and Vue simplicity beat Gatsby's React bloat for real-world apps. Pick Nuxt unless you're married to React.
Nuxt
Nuxt delivers server-side rendering out of the box without the GraphQL tax. Gatsby's build times balloon with content, while Nuxt scales gracefully with dynamic data.
Two Philosophies: Static vs Dynamic by Default
Gatsby is a static site generator that treats everything as a build-time GraphQL query—great for blogs, terrible for apps that change. Nuxt is a meta-framework for Vue that defaults to universal rendering, meaning you get SSR, static generation, or SPA mode in one package. Gatsby forces you into its data layer; Nuxt lets you fetch data however you want, from REST APIs to WebSockets. If you think of Gatsby as a fancy Jekyll with React, Nuxt is the Vue equivalent of Next.js—built for real applications, not just marketing pages.
Where Nuxt Wins — Server-Side Rendering Without the Headache
Nuxt's automatic SSR setup means you get SEO-friendly pages without configuring Webpack for hours. Its file-based routing (just drop a .vue file in /pages) is idiot-proof compared to Gatsby's plugin-heavy routing. Need dynamic routes? Nuxt handles them natively; Gatsby requires you to mess with gatsby-node.js. Pricing-wise, Nuxt is free and open-source, while Gatsby Cloud starts at $50/month for decent build times—and you'll hit that fast because Gatsby rebuilds your entire site on every content change. Nuxt's incremental static regeneration (via Nuxt 3) lets you update pages without full rebuilds, something Gatsby only offers in its premium tier.
Where Gatsby Holds Its Own — The React Ecosystem Lock-In
If your team only knows React, Gatsby is the best static generator for React. Its plugin ecosystem (over 2,000 plugins) connects easily to CMSs like Contentful or WordPress—though you'll pay in build time. Gatsby's image optimization is stellar, automatically lazy-loading and resizing images without extra code. For purely static sites with fixed content, Gatsby's GraphQL data layer can be nice, letting you query all your data in one place. But that's it: Gatsby is a one-trick pony for pre-rendered React sites, and it does that trick well if you ignore the 10-minute build times.
The Gotcha — GraphQL Isn't a Feature, It's a Tax
Gatsby forces GraphQL for everything, even local data. Want to use a simple JSON file? You must write a GraphQL query. This adds complexity for no benefit on small projects. Nuxt, by contrast, lets you import JSON directly or fetch from APIs with asyncData. Switching from Gatsby to Nuxt means rewriting your data layer—a week of work for a medium site. But the hidden cost is Gatsby's build performance: a site with 1,000 pages can take 20+ minutes to build, while Nuxt generates static pages in seconds because it doesn't have to process a GraphQL schema each time.
If You're Starting Today — Skip the Static-Only Mindset
Choose Nuxt unless you're building a purely static blog with React. For e-commerce, dashboards, or any app with user-generated content, Nuxt's hybrid rendering means you can statically generate product pages but server-render user profiles. Use Gatsby only if: (1) your content never changes after build, (2) you must use React, and (3) you have budget for Gatsby Cloud to speed up builds. Otherwise, Nuxt's zero-config SSR and free price tag make it the default pick for 2023.
What Most Comparisons Get Wrong — It's Not Vue vs React
This isn't about Vue versus React; it's about framework flexibility. Nuxt works with any backend (Node.js, Laravel, even static files), while Gatsby assumes you'll use a headless CMS. Most reviews praise Gatsby's 'rich ecosystem' but ignore that you need plugins for basic things like sitemaps—Nuxt includes that. The real question: do you want a tool that does one thing (static sites) okay, or a framework that adapts to your needs? Nuxt adapts; Gatsby dictates.
Quick Comparison
| Factor | Nuxt | Gatsby |
|---|---|---|
| Rendering Modes | SSR, SSG, SPA, and hybrid out of the box | SSG only (requires plugins for SSR) |
| Data Fetching | Any method (REST, GraphQL, files) via asyncData | GraphQL-only at build time |
| Build Time for 500 Pages | ~30 seconds (static generation) | ~5-10 minutes (GraphQL processing) |
| Pricing | Free, open-source | Free for basic, Gatsby Cloud from $50/month |
| Learning Curve | Low (Vue basics + file-based routing) | Medium (React + GraphQL + plugin system) |
| Plugin Ecosystem | 200+ modules (optional) | 2,000+ plugins (often required) |
| Image Optimization | Via @nuxt/image module (configurable) | Automatic with gatsby-image |
| CMS Integration | Flexible (any API) | Excellent with headless CMSs via plugins |
The Verdict
Use Nuxt if: You're building an app that needs SSR, dynamic content, or you value simplicity over ecosystem size.
Use Gatsby if: You're making a static marketing site with React and have budget for Gatsby Cloud to handle slow builds.
Consider: Next.js if you want React with Nuxt-like flexibility—it's the React equivalent of Nuxt, but with less Vue elegance.
Nuxt delivers server-side rendering out of the box without the GraphQL tax. Gatsby's build times balloon with content, while Nuxt scales gracefully with dynamic data.
Related Comparisons
Disagree? nice@nicepick.dev