Knowledge · WordPress Web Design
Headless WordPress + Next.js: When the Complexity Pays Off
Headless WordPress decouples the editor from the front-end. WordPress becomes a content API; the front-end is built in Next.js, Astro, Nuxt, or SvelteKit. The performance gains are real. The complexity tax is also real. For 85% of mid-market B2B sites, traditional WordPress is the right answer. For the other 15% — specifically the ones with serious traffic, complex front-end requirements, or polyglot teams — headless is transformative.
№ 01How headless WordPress works
WordPress runs in the back, accessed by your team for content authoring. The WordPress REST API or WPGraphQL exposes posts, pages, custom fields, taxonomies, media as JSON. A front-end framework (Next.js most commonly) fetches that data at build time or request time and renders the public site.
The public-facing URLs (yoursite.com/about) hit the Next.js front-end, not WordPress. WordPress lives at a separate domain like cms.yoursite.com and is locked down to authenticated requests + your team’s IPs.
Static Site Generation (SSG): Next.js builds every page to HTML at build time. Deployed to Vercel or Netlify. Served from edge CDN. Page loads are HTML-only and instant.
Incremental Static Regeneration (ISR): pages re-build on a TTL. New blog post? Page regenerates within 60 seconds. Combines static performance with near-realtime content.
№ 02Where headless wins
Performance ceiling. A well-built headless site hits 0.4-0.8s LCP. Traditional WordPress on Kinsta hits 1.1-1.6s. The gap is the difference between ‘great’ and ‘market-leading.’ For sites where milliseconds matter (high-traffic e-commerce, programmatic SEO competing in fast verticals), the gap is real.
Front-end flexibility. React component model. Interactive UI patterns that would require heavy JS plugins on WordPress. SPA-style navigation. Real-time collaborative features.
Scale. Static front-ends scale infinitely on CDN. A traffic spike that would melt a traditional WP site is invisible to a headless one.
Security posture. The public site has no PHP, no database, no admin. The WordPress admin is firewall-isolated. Attack surface shrinks to the API.
№ 03Where traditional WordPress still wins
Authoring experience. WordPress’s preview-as-you-edit, drag-and-drop blocks, and visual previews work natively. Headless previewing requires extra plumbing (preview mode, draft routes, deploy hooks). Authors notice the friction.
Plugin catalog. Yoast / Rank Math / Gravity Forms / WooCommerce all work via the standard WP UI. On headless, you re-implement most of what those plugins do on the front-end yourself.
Build cost. Traditional WP custom site: $5K-$15K. Headless equivalent: $15K-$40K. The cost difference is real engineering hours.
Hiring pool. Every WordPress freelancer can maintain a traditional WP site. Headless requires a React + WordPress engineer — a smaller market and 2-3× the hourly rate.
№ 04When headless is genuinely the right call
We recommend headless when ALL of these are true:
- Site traffic is 100K+ monthly sessions or expected to be within 12 months
- The team has React engineers on staff or budget to hire them
- The front-end has interactive complexity beyond ‘forms and content’ (interactive product configurator, dashboard-style pages, real-time data)
- Programmatic SEO is a serious channel (1,000+ pages with template-driven content)
- The build budget supports $20K+ initial
Miss any of those and traditional WordPress is the better answer.
№ 05Our headless stack when we build it
WordPress: traditional install on Kinsta or WP Engine, locked to cms subdomain, WPGraphQL plugin enabled.
Front-end: Next.js 14+ with App Router. Static generation for marketing pages, ISR for blog/news, server components for personalized content.
Hosting: Vercel for the Next.js front-end (Pro plan $20/mo + usage). Edge functions for ISR.
Image handling: Next.js Image component + Vercel image optimization, or Cloudflare Images for self-hosted alternative.
Forms: HubSpot or Marketo native forms, or a serverless function handling Gravity Forms POST endpoints.
Total monthly infra cost: $75-$250/mo for low-medium traffic, $300-$800/mo for high traffic. Build cost: $18K-$45K depending on complexity.
⚠What to avoid
- Going headless for a 15-page brochure site. The complexity tax is wildly out of proportion. Build it on FSE WordPress for $5K and ship in 14 days.
- Headless ‘because it’s modern.’ Modern isn’t a strategy. Match the toolchain to the requirements. Most B2B sites don’t need headless.
- Building headless without a React engineer on the team. You’ll be hostage to the agency that built it. The agency dependency is structurally worse than traditional WP because the talent pool is smaller.
Related questions
Go deeper
Three Ways to Start · No Sales Pitch
Want this analyzed on your site?
$500 audit. 5-day delivery. Refundable on engagement.