Headless WordPress es una arquitectura en la que WordPress se usa solo como sistema de gestion de contenido (CMS) y API de contenido, mientras que el frontend publico se construye con una pila tecnologica independiente. La capa de tema tradicional de WordPress (PHP, jerarquia de plantillas, jQuery) se elimina o se ignora y la aplicacion frontend obtiene los contenidos por la REST API de WordPress (incorporada desde WordPress 4.7, diciembre de 2016) o por el endpoint GraphQL que provee el plugin WPGraphQL (mas de 60.000 instalaciones activas en 2025). Frameworks populares: Next.js (React, de Vercel), Astro, Nuxt (Vue), SvelteKit, Gatsby, Remix, Eleventy y Hugo. El frontend se despliega aparte, normalmente como HTML estatico en un CDN (Vercel, Netlify, Cloudflare Pages, AWS Amplify) o como Node.js en el edge. Lo impulsan la demanda de cargas mas rapidas, mejores Core Web Vitals, experiencia de desarrollo moderna y publicacion multi canal.
Diferencia con WordPress clasico
- Visitante abre
https://shop.example.com(frontend Next.js en Vercel). - El frontend llama a
https://cms.example.com/wp-json/wp/v2/posts. - WordPress devuelve JSON.
- El frontend renderiza la pagina y envia HTML y un pequeno bundle JavaScript.
APIs que usa Headless WordPress
| API | Formato | Pros | Contras |
|---|---|---|---|
| WordPress REST API | JSON, REST | Integrada, sin plugin | Multiples round trips |
| WPGraphQL | GraphQL | Campos a la carta | Plugin, cache HTTP dificil |
| WP REST + Application Passwords | JSON + Basic Auth | Auth simple (ver) | Limites REST |
| JWT Authentication for WP-API | JSON + JWT | Auth stateless | Revocacion compleja |
Ventajas
- Rendimiento: estatico en CDN 20 a 80 ms vs 300 a 1500 ms TTFB de PHP clasico.
- Mejores Core Web Vitals.
- Experiencia moderna (React, Vue, Tailwind, TypeScript).
- Superficie de ataque menor.
- Publicacion multi canal.
- Escalado mediante ISR.
- Editor sin cambios (Gutenberg, ACF).
Desventajas
- Mayor coste y dos sistemas.
- Preview WYSIWYG roto.
- Plugins que inyectan HTML se rompen.
- SEO manual.
- Tiempos de build elevados.
- Comentarios y formularios a custom.
- Desarrolladores React mas caros.
Frameworks populares
- Next.js, Astro, Nuxt, SvelteKit, Gatsby, Eleventy, Remix.
Hosting
- Backend: Kinsta, WP Engine, Cloudways, Hetzner. Planes headless: WP Engine Atlas, Kinsta Headless, Pantheon Decoupled.
- Frontend: Vercel, Netlify, Cloudflare Pages, AWS Amplify, Render, Railway, Fly.io.
Ejemplo con Next.js y 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;
}Cuando NO ir Headless
- Sitios pequenos.
- Equipo sin React/Vue.
- Dependencia de page builders.
- Muchos plugins que inyectan HTML.
- WooCommerce con checkout complejo.
SEO
SSR o SSG para que el HTML traiga contenido. Mapear titulo, meta description, canonical, Open Graph, Twitter Card, sitemap, robots.txt y JSON-LD.
Como ayuda InspectWP?
InspectWP detecta CDNs como Vercel, Netlify o Cloudflare por cabeceras (x-vercel-id, x-nf-request-id, cf-ray) y verifica el subdominio CMS.