Headless WordPress e uma arquitetura em que o WordPress e usado apenas como sistema de gestao de conteudo (CMS) e API, enquanto o frontend publico e construido com pilha tecnologica separada. A camada de tema tradicional (PHP, hierarquia de templates, jQuery) e removida e a aplicacao frontend busca o conteudo via REST API (desde WordPress 4.7 em dezembro de 2016) ou via endpoint GraphQL do plugin WPGraphQL (mais de 60.000 instalacoes em 2025). Frameworks populares: Next.js (React, Vercel), Astro, Nuxt (Vue), SvelteKit, Gatsby, Remix, Eleventy, Hugo. O frontend e implantado separadamente, normalmente como HTML estatico em um CDN (Vercel, Netlify, Cloudflare Pages, AWS Amplify) ou Node.js no edge. Os motivadores sao desempenho, Core Web Vitals, experiencia moderna e publicacao multi canal.
Diferenca para WordPress classico
- Visitante abre
https://shop.example.com. - Frontend chama
https://cms.example.com/wp-json/wp/v2/posts. - WordPress retorna JSON.
- Frontend renderiza HTML e envia pequeno bundle JS.
APIs
| API | Formato | Vantagens | Desvantagens |
|---|---|---|---|
| WordPress REST API | JSON | Embutida | Multiplas chamadas |
| WPGraphQL | GraphQL | Campos sob demanda | Plugin, cache HTTP dificil |
Vantagens
- Performance.
- Core Web Vitals.
- Experiencia moderna.
- Menor superficie de ataque.
- Multi canal.
- Escalabilidade com ISR.
- Editor inalterado.
Desvantagens
- Custo maior.
- Preview WYSIWYG quebrado.
- Plugins com HTML quebram.
- SEO manual.
- Build longo.
- Comentarios e formularios custom.
- Desenvolvedores React mais caros.
Frameworks populares
- Next.js, Astro, Nuxt, SvelteKit, Gatsby, Eleventy, Remix.
Hospedagem
- Backend: Kinsta, WP Engine, Cloudways. Planos: WP Engine Atlas, Kinsta Headless, Pantheon Decoupled.
- Frontend: Vercel, Netlify, Cloudflare Pages, AWS Amplify, Render, Railway, Fly.io.
Exemplo com Next.js e WPGraphQL
async function getPosts() {
const res = await fetch('https://cms.example.com/graphql', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query: `{ posts(first: 10) { nodes { title slug } } }` }),
next: { revalidate: 60 },
});
return (await res.json()).data.posts.nodes;
}Quando NAO usar Headless
- Sites pequenos.
- Sem time React/Vue.
- Page builders essenciais.
- Muitos plugins que injetam HTML.
- WooCommerce com checkout complexo.
SEO
SSR ou SSG. Mapear title, meta description, canonical, Open Graph, Twitter Card, sitemap, robots.txt e JSON-LD.
Como o InspectWP ajuda?
InspectWP detecta CDNs (Vercel, Netlify, Cloudflare) por cabecalhos x-vercel-id, x-nf-request-id, cf-ray.