Gatsby and Nuxt are the two most popular static site generators for building headless WordPress frontends. Gatsby uses React, while Nuxt uses Vue.js, but both follow the same principle: they fetch content from the WordPress REST API or WPGraphQL at build time and generate static HTML files that can be served from a CDN. The result is a site that loads instantly, scales effortlessly, and is nearly impenetrable to attacks.
This guide covers how to use WordPress as a headless CMS with Gatsby and Nuxt, from setup to deployment.
Gatsby with WordPress
Gatsby is a React-based static site generator with strong WordPress integration. The gatsby-source-wordpress plugin connects Gatsby to your WordPress site’s WPGraphQL API, pulling posts, pages, media, and custom post types into Gatsby’s data layer. You build React components that display the content, and Gatsby generates static HTML pages at build time.
Gatsby’s plugin ecosystem includes image optimization, SEO, and performance analysis plugins. Use gatsby-plugin-image for responsive images that automatically generate WebP versions and multiple sizes. Use gatsby-plugin-manifest for PWA support and gatsby-plugin-sitemap for SEO.
Nuxt with WordPress
Nuxt is the Vue.js equivalent of Gatsby. The @nuxtjs/wp-api module connects Nuxt to the WordPress REST API. Use asyncData in page components to fetch WordPress content during the static generation process. Nuxt’s auto-import features and module system make it straightforward to build feature-rich headless WordPress sites.
Nuxt offers multiple rendering modes: static generation for pre-rendered pages, server-side rendering for dynamic content, and hybrid mode that combines both for different routes. This flexibility makes Nuxt suitable for sites that need both static content and dynamic features.
Choosing Between Gatsby and Nuxt
Your choice between Gatsby and Nuxt depends on your team’s expertise and project requirements. Choose Gatsby if your team knows React, you need a rich plugin ecosystem, or you want tight integration with the React ecosystem. Choose Nuxt if your team knows Vue.js, you need flexible rendering modes, or you prefer a simpler learning curve.
Both frameworks produce excellent results with WordPress. The performance difference between them is negligible — both generate static HTML that loads in milliseconds. Choose the framework that aligns with your team’s skills and your project’s specific needs.
Build and Deployment
Both Gatsby and Nuxt generate a dist or public directory with static HTML files. Deploy these files to any static host — Netlify, Vercel, Cloudflare Pages, or an S3 bucket. Set up webhooks in WordPress to trigger rebuilds when content changes. Both frameworks support incremental builds that only regenerate changed pages, reducing build times for large sites.
For the WordPress backend, any standard WordPress host works. Since the frontend is served as static HTML, the WordPress server only needs to handle API requests from the build process. A basic VPS or managed WordPress host is sufficient.
The Bottom Line
Gatsby and Nuxt transform WordPress into a powerful static site generator. You get the content management benefits of WordPress — familiar editing interface, plugin ecosystem, and user management — with the performance and security benefits of static sites. Choose the framework that matches your team’s skills, set up automatic rebuilds, and deploy to a CDN for global performance.