Desde un punto de vista técnico, los Headless WordPress se han puesto de moda en muchos desarrollos de proyectos basados en este CMS por varios motivos que explicaremos a continuación, pero sobre todo, la independencia del Frontend con respecto al Backend de una instalación WordPress.
¿De qué hablamos en este artículo?
Qué es un Headless WordPress
A estas alturas sabemos que WordPress es un gestor de contenidos (CMS) y que está formado por dos partes: una privada o backend, en la que administramos los contenidos, usuarios, plugins, aspecto y ajustes de nuestra instalación y una parte pública o frontend, que es la zona visible de la web por los visitantes de nuestro site.
Ahora bien, la característica principal de un Headless WordPress es que no vamos a usar la parte Frontend que nos ofrece el CMS, sino que vamos a implementarla de otra forma como veremos ahora.
Entonces, sólo vamos a usar la parte de gestión de contenidos de WordPress que se le da de lujo a este CMS.
Qué es el API REST de WordPress
Para entender mejor cómo vamos a implementar un WordPress desacoplado o disociado, tenemos que entender qué es la REST API de WordPress y qué nos va a ofrecer para poder implementar con éxito el Frontend de nuestra página web.
Para que lo entendamos de manera simple, nuestro WordPress ofrece al exterior (a otras aplicaciones web, apps para dispositivos móviles, PWAs –Progressive Web Apps-, a desarrollos ad-hoc,…etcétera) una serie de métodos o funciones para obtener datos o contenidos filtrados de nuestra base de datos de WordPress, también llamados endpoints.
Esto es el API de WP. Lo que ofrece REST es una serie de normas bien especificadas para que todo el mundo sepa cómo pedir esa información y cómo le va a llegar. Normalmente en formato JSON, pero si tenéis curiosidad aquí tenéis la especificación de REST en Wikipedia.
Características principales de un Headless WordPress
Un Headless WordPress se caracteriza porque la parte Frontend está implementada de manera independiente de la parte Backend como hemos comentado anteriormente.
Con la proliferación de los frameworks JS para la implementación de aplicaciones web, tales como React, VueJS, Angular, Nextjs, nodeJS…, que no dependen de un servidor para ejecutarse y visualizar el contenido de una página web, vemos que la infraestructura para un WordPress desacoplado va tomando forma.
Estos frameworks usan el intérprete de Javascript nativo en todos los navegadores para dibujar nuestra página web, lo que los hace extremadamente rápidos a la hora de representar en HTML una página web, mucho más que cualquier lenguaje de servidor como PHP.
Con esto, vemos que las principales características de un Headless WordPress son:
- La parte Frontend está implementada principalmente con un framework JS.
- El desarrollo en Javascript se comunica con el backend para obtener la información y el contenido a través de los endpoints del REST API de WordPress.
- Los datos obtenidos se pintan en HTML y CSS directamente con algo de ayuda de JS.
- Podemos tener en dos servidores (y dominios) diferentes el backend y el frontend de nuestro site.
- Podemos tener sólo una instalación del backend de WordPress como repositorio de información y múltiples aplicaciones disponibles para representar los datos:
- Webapp.
- App para dispositivos móviles.
- PWA.
- Múltiples sitios webs.
- Dispositivos IoT.
- …etcétera.
- El REST API de WordPress se puede extender con métodos nuevos a gusto del consumidor.
Ventajas de un WordPress desacoplado
- Las páginas web implementadas con WordPress desacoplados son, a priori, mucho más rápidas de cargar, mejorando el WPO de nuestro site.
- Sólo hay que dar de alta una vez los contenidos en la página web a través del Backend.
- Los contenidos pueden ser «consumidos» por cualquier aplicación que se conecte satisfactoriamente al REST API de WordPress.
- Podemos tener equipos independientes trabajando sobre la página web: un equipo de Marketing para la parte Backend y otro de Desarrollo con ayuda de UI/UX para la parte Frontend.
- No dependemos de una plantilla de WordPress implementada en lenguaje PHP de servidor para hacer cambios sobre el Frontend de nuestro site.
- Los equipos de desarrollo estarán altamente especializados en lenguajes de cliente como HTML, CSS o JS.
- Cualquier información que queramos pintar en nuestra página web no va a depender de desarrollos de PHP en forma de plugins o widgets, si no que será implementada directamente en HTML con CSS y JS.
- Mejoramos el SEO de nuestro site al poder ofrecer contenidos muy rápidos, altamente configurables, dinámicos y adaptados a cualquier dispositivo.
- Aumentamos la seguridad del WordPress al no tener visible el Backend para los visitantes del site, sólo para Editores y Administradores a través de una URL privada.
Otra de las principales ventajas de estos WordPress disociados es que puedes cambiar el diseño sin tener que instalar de nuevo el WordPress ni hacer una migración de la base de datos a otro servidor. Se agradece esto a la hora de hacer rediseños de tu site.
Los datos no cambian, sólo la representación de los mismos en el Frontend de tu página web.
Dónde no usar Headless WordPress
Hay proyectos o sitios web donde no es aconsejable tener un Headless WordPress o si tienes una agencia de Marketing donde vendes rediseños o migraciones de sitios web a clientes, puede que tu cliente o el proyecto no sea adecuado para este tipo de implementación.
El Frontend al estar desarrollado con un Framework JS tiene una fuerte dependencia de desarrolladores especializados en esos lenguajes de programación, lo que redundaría en tener siempre a uno o varios desarrolladores para implementar cambios en el Frontend de tu site. En algunos proyectos incluso podrías depender de un equipo de desarrollo externo con el coste añadido que conlleva.
Si el proyecto es «llave en mano» para que nuestro cliente no dependa de nosotros y sea totalmente autónomo, no es una buena idea implementar un Headless CMS si no tiene un buen equipo de IT especializado en programación para el Frontend y afrontar los cambios en los endpoints del REST API o no puede pagar nuestros servicios como desarrolladores especializados.
VÍDEO: Cómo implementar un Headless WordPress con WPGraphQL, ACF y React [ENG]
¿Qué os parece el Headless WordPress?
Ahora os toca a vosotros, preguntar o aportar ideas a este artículo sobre las instalaciones de WordPress desacopladas, ¿os parecen buena idea implementarlo?
Podéis usar los comentarios de abajo para aportar vuestro feedback.