En desarrollo web, una arquitectura de software donde la presentación (la «cara» que ven los usuarios) está totalmente separada de la lógica y gestión de datos (el «cuerpo» o backend).
mostrar
Descripción
En un sistema tradicional (monolítico), el frontend y el backend están unidos en una misma plataforma. En un sistema headless, el backend se deshace de su «cabeza» (la interfaz visual) y se comunica con ella exclusivamente a través de una API.
Componentes
Content Management System (CMS) headless
En un CMS headless los editores escriben el contenido, pero no deciden cómo se ve.
API
La API (REST o GraphQL) es el canal de entrega de esos datos en formato JSON o XML.
Frontend framework
El frontend framework lo componen herramientas como React, Vue o Next.js, que consumen esos datos y los presentan con el diseño deseado.
Comparativa: tradicional vs. headless
| Característica | CMS tradicional (WordPress, Joomla) | CMS headless (Contentful, Strapi) |
| Acoplamiento | Estrecho (frontend y backend unidos). | Desacoplado (frontend y backend separados). |
| Flexibilidad | Limitada a las plantillas del sistema. | Total; podemos usar cualquier lenguaje. |
| Omnicanalidad | Difícil (diseñado para web). | Nativa (un solo backend para todo). |
| Curva de aprendizaje | Baja (amigable para no desarrolladores). | Media/alta (requiere programadores). |
Principales ventajas
Omnicanalidad
Podemos enviar el mismo contenido a nuestro sitio web, a nuestra aplicación de iOS y a una pantalla publicitaria simultáneamente y desde un solo panel.
Flexibilidad tecnológica
El equipo de frontend puede usar las herramientas más modernas sin que el backend suponga una limitación.
Seguridad
Como el frontend no está conectado directamente a la base de datos, la superficie de ataque para hackers se reduce considerablemente.
Escalabilidad
Podemos actualizar el diseño de nuestra web sin tocar ni un elemento de la base de datos o o la lógica de negocio.
Desventajas
Mayor complejidad técnica
A diferencia de un CMS tradicional (como WordPress), donde instalas un tema y ya tienes una web funcionando, en headless hay que construirlo todo desde cero.
Hace falta configurar el backend, definir la API y desarrollar el frontend de forma independiente.
Requiere conocimientos avanzados de frameworks modernos (como React, Vue o Svelte).
Costes iniciales más elevados
La separación de sistemas implica más horas de desarrollo y, por lo tanto, un mayor presupuesto inicial.
Desarrollo doble
Hay que gestionar dos entornos distintos.
Mantenimiento
Tendremos que actualizar y parchear tanto el CMS como la aplicación que consume los datos.
Dependencia total de desarrolladores
En un sistema tradicional, un usuario sin conocimientos técnicos puede cambiar el diseño básico o instalar un plugin.
En un entorno headless casi cualquier cambio estructural requiere la intervención de un programador. Los editores de contenido pueden sentirse limitados si el sistema de «vista previa» (preview) no está perfectamente configurado.
Gestión del SEO y marketing
En los sistemas monolíticos, el SEO suele venir «de caja» con plugins sencillos.
En headless, somos responsables de configurar los metadatos y las etiquetas sitemap, así como de gestionar el Server-Side Rendering (SSR) para que Google pueda leer el contenido correctamente, lo cual añade una capa extra de complejidad técnica.
Fragmentación de herramientas
Con headless pasamos de tener una solución «todo en uno» a un ecosistema de piezas sueltas:
-
Un servicio para el contenido (CMS).
-
Otro servicio para el hosting del frontend (Vercel, Netlify).
-
Otro para las imágenes o analíticas.
Si alguno de estos servicios falla, puede afectar toda la experiencia de usuario.