¿Qué es un “Headless” cms?

Un término que está muy de moda últimamente, además de “microservicios” es Headless CMS. Seguro que lo has escuchado y te has preguntado ¿Qué demonios es un headless CMS? Headless en inglés es “sin cabeza” pero traducir el término tampoco te ayuda a entender qué es.

Pues hoy voy a intentar aclararlo y explicar de forma breve y concisa a que nos referimos cuando hablamos de headless cms.

Primero: ¿Qué significa CMS? Si aun no lo sabes son las siglas de Content Management System. Wikipedia lo define

Un sistema de gestión de contenidos o CMS (del inglés content management system) es un programa informático que permite crear un entorno de trabajo para la creación y administración de contenidos, principalmente en páginas web, por parte de los administradores, editores, participantes y demás usuarios

Wikipedia

Por lo tanto un gestor de contenidos nos permite tener un blog, o la web de nuestro negocio, porque todo el contenido está en un sitio y se administra de forma relativamente sencilla. Existen muchos CMS, escritos en múltiples lenguajes, por nombrar alguno tenemos WordPress y Joomla en PHP o Magnolia en Java. Los CMS tradicionales, como WordPress tienen una forma de funcionar concreta y se componen básicamente de 3 elementos clave:

  • Base de datos, donde se almacena la información.
  • Un panel de administración, donde se conectan los editores para añadir contenido.
  • Un frontal, construido en HTML, CSS y JS. Donde se visualizan los datos.

Estos tres elementos suelen estar estrechamente relacionados ( o acoplados ), juntos ofrecen una web, tal y como la conocemos. A esto se le suele denominar monolito.

En wordpress por ejemplo tenemos la posibilidad de tener una base de datos MySQL o PostgreSQL. Pero a la hora de introducir el contenido y de mostrarlo siempre estamos atados a PHP y a que ambas cosas estén en la misma maquina.

El esquema es algo así:

Esquema clasico de una CMS tradicional
Esquema sencillo de un CMS tradicional

Ahora sí, ¿dónde está mi Headless?

La expresión “headless” o sin cabeza hace referencia a que separamos la parte que consume un usuario, o frontend, de la parte que usan los editores para añadir ese contenido y gestionarlo, o backend y por tanto también esa base de datos que almacena la información. De esta forma ese mismo backend, puede servir contenido a tantos frontends como se necesite. Pudiendo pedirle información, una web, Alexa o una aplicación móvil.

Por lo tanto eliminamos de un plumazo el tener que tener varias fuentes de información y mantener cada una de ellas.

Comparando ahora el esquema quedaría así

Comparatiba entre CMS tradicional y Headless CMS
Así explica Contentstack la diferencia

Así que ahora podemos crear el frontend de la forma que mas nos guste, por ejemplo usando React o Vue. Utilizando algún generador como Nuxt, Gastby o Gridsome. Y podríamos interactuar con el backend mediante una API Rest o GraphQL. Si no conocéis GraphQL puede que traigamos una entrada en el futuro hablando de él y por qué es tan interesante.

Como funciona Gridsome
Como Gridsome define su proceso

Por último tengo que deciros que os mentí al principio cuando dije que wordpress era un CMS tradicional. O al menos os mentí a medias. WordPress es un CMS tradicional pero también tiene la posibilidad de ser un headless. Ya que WordPress desde hace mucho tiempo ha ido creando una API Rest para interactuar con su core.

Así concluyendo. Podríamos tener el contenido en Contentful o WordPress. Y por otra parte consumirlo desde una web hecha con Gridsome que se está sirviendo desde Netlify ( una fantástica plataforma serverless).

La ventajas principales podríamos decir que son:

  • Cantidad ilimitada de frontends( web, Alexa, un smart watch…)
  • Posibilidad de combinarse con diversos lenguajes de programación
  • Diseño más flexible del frontend( Nuxt, Gastby, Svelte)
  • Mejor escalabilidad al estar desacoplado.

Algunos headless CMS muy interesantes son:


Imagen de portada cortesia de Werner Moser en Pixabay

Deja un comentario