Un headless CMS és un sistema de gestió de continguts que només s'encarrega del backend: emmagatzemar, organitzar i editar el contingut. No genera les pàgines web; en lloc d'això, lliura el contingut a través d'una API (REST o GraphQL) perquè qualsevol frontend —una web, una app mòbil o una pantalla— el mostri com vulgui.
Què és un headless CMS?
El nom ve de la idea de “treure-li el cap” al CMS. En un CMS tradicional, el “cap” és la capa de presentació: les plantilles i temes que converteixen el contingut en pàgines HTML. Un headless CMS elimina aquesta capa i es queda amb el “cos”: el panell d'administració, el model de continguts, els usuaris i permisos, i una API per consultar els continguts.
L'equip de continguts continua treballant en un panell d'administració com el de qualsevol CMS. La diferència és com arriba aquest contingut a l'usuari final: el frontend el demana a l'API i el presenta amb la tecnologia que triï l'equip de desenvolupament.
CMS tradicional vs headless CMS
CMS tradicional (acoblat), com WordPress o Drupal en el seu ús clàssic:
- El backend i el frontend formen una sola aplicació.
- El contingut es mostra amb els temes i plantilles del mateix CMS.
- Pensat sobretot per publicar una web.
- Ràpid de posar en marxa per a projectes senzills.
Headless CMS, com Strapi, Contentful o Sanity:
- El backend (contingut) i el frontend (presentació) són aplicacions separades.
- El contingut es lliura per API i el frontend es desenvolupa amb la tecnologia que es vulgui (per exemple, Next.js).
- El mateix contingut serveix per a web, apps mòbils i altres canals.
- Cal desenvolupar el frontend, però dóna llibertat total de disseny i rendiment.
Com funciona un headless CMS
- Modelatge de continguts: es defineixen els tipus de contingut (per exemple, article, projecte o producte) i els seus camps.
- Edició: l'equip de continguts crea i publica des del panell d'administració, sense tocar codi.
- API: el CMS exposa el contingut a través d'una API REST o GraphQL.
- Frontend: la web o l'app consulta l'API i pinta el contingut. Amb frameworks com Next.js, les pàgines es poden generar al servidor o de manera estàtica perquè carreguin molt ràpid i siguin fàcils d'indexar.
Arquitectura headless
Quan es parla d'arquitectura headless es fa referència precisament a aquesta separació: el contingut viu en un servei i la presentació en un altre, comunicats per APIs. És una peça habitual de les arquitectures modernes de tipus composable o Jamstack, en què cada part (continguts, cerca, pagaments, autenticació...) és un servei independent que es pot substituir sense refer tot el sistema.
Avantatges d'un headless CMS
- Llibertat tecnològica al frontend: l'equip de desenvolupament tria el framework i no depèn dels temes del CMS.
- Omnicanal: un mateix contingut es publica a la web, en apps mòbils o en qualsevol dispositiu que consumeixi una API.
- Rendiment: combinat amb generació estàtica o renderitzat al servidor, les webs solen ser més ràpides, cosa que també ajuda al SEO.
- Seguretat: el panell d'administració i la base de dades no estan exposats a la web pública, cosa que redueix la superfície d'atac. A més, no depens de plugins o temes de tercers a la capa visible.
- Escalabilitat: frontend i backend escalen per separat.
- Evolució més senzilla: pots redissenyar el frontend sense migrar el contingut, o canviar de CMS sense refer la web.
Inconvenients d'un headless CMS
- Cal desenvolupar el frontend: no hi ha plantilles llestes per utilitzar, així que la inversió inicial és més gran.
- Previsualització: veure com quedarà un contingut abans de publicar-lo requereix configurar-ho expressament.
- Funcionalitats “de sèrie”: coses que un CMS tradicional resol amb un plugin (formularis, cercador, SEO) s'han de construir o integrar.
- Més peces a mantenir: dues aplicacions en lloc d'una, amb els seus desplegaments.
Exemples de headless CMS
- Strapi: de codi obert i basat en Node.js. El pots allotjar a la teva pròpia infraestructura i ofereix API REST i GraphQL.
- Contentful: headless CMS comercial al núvol (SaaS).
- Sanity: plataforma de continguts al núvol amb un editor molt personalitzable.
- Directus: de codi obert, es munta sobre una base de dades SQL existent.
- Drupal: tot i ser un CMS tradicional, pot funcionar en mode headless o desacoblat gràcies a les seves APIs (JSON:API, REST o GraphQL).
- WordPress: també es pot utilitzar com a headless a través de la seva API REST.
Quan convé utilitzar un headless CMS?
Un headless CMS té sentit quan:
- Necessites publicar el mateix contingut en diversos canals (web, app, etc.).
- El rendiment i l'experiència d'usuari de la web són una prioritat.
- Vols un disseny totalment a mida o utilitzar un framework modern com Next.js.
- Preveus que el frontend canviarà més sovint que el contingut.
En canvi, per a una web senzilla, amb poc pressupost i sense equip de desenvolupament, un CMS tradicional sol ser més pràctic.
Com l'utilitzem a Digrup
La nostra pròpia web funciona així: el contingut es gestiona a Strapi i el frontend està desenvolupat amb Next.js. Quan un projecte ho demana, també utilitzem Drupal com a backend desacoblat. Si estàs valorant una arquitectura headless per al teu projecte, parlem.
Preguntes freqüents
Què vol dir “headless”?
“Headless” vol dir “sense cap”: el CMS no té capa de presentació pròpia i lliura el contingut per API perquè un altre sistema el mostri.
És el mateix headless que desacoblat?
No exactament. Un CMS desacoblat separa backend i frontend però continua incloent una capa de presentació pròpia; un CMS headless no en té cap i només ofereix l'API.
Strapi és un headless CMS?
Sí. Strapi és un dels headless CMS de codi obert més utilitzats. Ho expliquem en detall a què és Strapi.
Un headless CMS és bo per al SEO?
Sí, sempre que el frontend generi l'HTML al servidor o de manera estàtica (com fa Next.js) i gestioni bé les metadades, les URLs i el sitemap. El SEO passa a dependre més del frontend que del CMS.
