Headless WordPress: Front-End Moderno con JavaScript

Share on facebook
Share on twitter
Share on whatsapp

WordPress ha avanzado muchísimo desde sus comienzos como una herramienta para escribir blogs.

15 años después de su lanzamiento se ha vuelto el CMS número uno del mundo, tanto para desarrolladores como para usuarios que no tienen conocimiento técnico.

Hoy en día, WordPress potencia el 30% del top 10 millones de sitio en internet.

Increíble, ¿no

Desde que la REST API fue incorporada dentro de WordPress, los desarrolladores pueden experimentar y utilizarla de forma “desacoplada” o “headless”, quizás una traducción más directa sería “sin-cabeza”.

¿Qué significa eso de headless?

Que por un lado tienes el back-end (PHP y la base de datos – la cabeza) y por otro el front-end, lo que el usuario final puede ver y con lo que interactúa.

El beneficio principal de ir por el camino de “sin-cabeza” es que puedes utilizar tecnologías de front-end modernas para crear una interfaz para el usuario con librerias o frameworks de JavaScript, como Vue.js, Angular y React, las cuales te permiten crear experiencias similares a Apps y web apps modernas.

¿Cuál es la diferencia de esto con la forma estándar?

La diferencia es que por defecto los sitios de WordPress tienen el front y el back-end en el mismo lugar, en la misma instalación, y además, ambos se hacen con PHP lo cual limita la forma en la que puedes crear la parte visual del sitio.

Por otro lado, tener la “cabeza” separada del front-end puede ser mejor para la seguridad, ya que hace que encontrar los archivos de WordPress y la base de datos sea más difícil, porque no necesitan estar ni siquiera en el mismo servidor.

Beneficios y contras de hacer un sitio web headless con WordPress:

Beneficios:

  • Mayor seguridad.
  • Mejor experiencia para el usuario debido al uso de librerías modernas de Front-End.
  • Menores tiempos de carga: esto es ideal ya que la mayoría de usuarios navega el internet desde sus dispositivos móviles.
  • Mayor facilidad para hacer cambios en el diseño de tus sitios.
  • Puedes crear una Progressive Web App.

Contras:

  • Manutención más complicada porque tienes que mantener dos plataformas separadas.
  • Mayor dificultad para mejorar el posicionamiento orgánico (SEO), ya que necesitas un pre-render.
  • Necesitas aprender a utilizar librerias o frameworks nuevos que antes no tenían nada que ver con WordPress.

¿Cómo funciona?

Básicamente, para poder crear un sitio web headless con WordPress tenemos que utilizar su REST API como lo mencionamos antes, pero ¿qué significa eso?

¿Qué es la REST API de WordPress?

Digamos que estás en Instagram y quieres ver todos los posts de cierto hashtag, así que vas al buscados y lo escribes, esto te va a devolver todo el listado de posts con ese hashtag.

Pues la REST API funciona de forma similar, realizas una búsqueda y te devuelve un listado de elementos desde el servicio al que le haces el pedido.

La parte de API significa que es una Interfáz de Programación de la Aplicación (Application Programming Interface – API) y básicamente es una serie de reglas que le permiten a los programas hablar entre sí.

El programador crea una API de su servicio en el servidor y le permite al cliente hablar con ella.

La parte REST determina la apariencia de esa API.

Las siglas significan Estado de Transferencia Representacional (Representational State Transfer – REST) y son una serie de reglas que los desarrolladores siguen al crear la API. Una de esas reglas determinan que deberías poder obtener cierto dato (llamado recurso o resource) cuando enlazas hacia determinada URL.

Estas URLs se llaman pedidos (requests) mientras que los datos que te devuelven se llaman respuestas (response).  

¿Quieres un ejemplo?

Escribe esto es un navegador: http://tusitioweb.com/wp-json y verás todos los datos que vas a obtener. Recuerda reemplazar tusitioweb.com con tu propio dominio.

Muy bueno, ¿no?

Haciendo eso ya utilizaste la REST API y de WordPress y de tu sitio web, muy fácil.

Lo mejor de todo, es que puedes acceder a esa información desde otro lado, incluso desde otro dominio, y eso nos permite tener la base de datos en un servidor y el front-end en otro.

Problemas de las REST APIs

El principal problema de este tipo de APIs es que son muy lentas debido a que devuelven muchísima información, incluso la que no vas a utilizar, por eso, no es eficiente.

Lo anterior lo pudiste notar con el request de prueba que hiciste en tu sitio, te devolvió gran cantidad de información, ¿no?

Una solución para eso es GraphQL, que además de ser más visual, nos permite extraer sólo los datos que necesitamos, ni más, ni menos, optimizando el desempeño del servidor (porque pedimos sólo lo que necesitamos) y del front-end, porque tiene que esperar menos tiempo para obtener la respuesta que necesita mostrarle al usuario.

GraphQL, ¿qué es?

Es una lenguaje de consulta de APIs que también permite ejecutar dichas consultas a partir de los datos existentes.

GraphQL provee una descripción completa y entendible de los datos en tu API, dándole a los clientes la posibilidad de pedir exatamente lo que necesitan.

REST VS GraphQL

La diferencia principal es que GraphQL te permite interactuar con los datos de la API de forma dinámica en vez de con URLs pre-definidas que devuelven gran cantidad de datos de forma ineficiente.

Te doy un ejemplo:

Si queremos obtener el autor de un libro en una API utilizando REST, deberíamos hacer un pedido similar a este:

GET /libros/1{
   "titulo": "Mr. Mercedes",
   “publicado”:”2015”,
   “rating”:”5”,
   "autor": { 
     "nombre": "Stephen",
     "apellido": "King"
   }
   // ... más datos
 }

Como puedes ver, para obtener el autor tenemos que hacer un pedido a una URL que nos da más datos que no necesitamos, como rating, fecha de publicación, etc.

Ahora, veamos como podemos obtener el mismo dato utilizando GraphQL:.

GET /graphql?query={ libro(id: "1") { titulo, autor{ nombre} } }{
  "titulo": "Mr. Mercedes",
  "autor": {
    "nombre": "Stephen",
  }
}

Como puedes ver, pedimos exactamente lo que queremos, y sólo nos devuelven justo lo que necesitamos, ni más ni menos.

La diferencia principal es que como REST funciona por medio de URLs, los datos que obtienes son más genéricos y solo después decides qué mostrar, tengo 100 datos de la URL y solo necesito 1, ¿te parece ideal?

Mientras que con GraphQL podemos añadir parámetros al pedido para especificar exactamente qué datos son los que quiero obtener, de esta forma optimizamos el pedido y las respuestas.

Ahora el problema es, ¿cómo puedo utilizar GraphQL en WordPress?

WPGrahpQL: plugin para WordPress

Este plugin gratuito y de código abierto te permite implementar GraphQL en cualquier sitio web hecho con WordPress.

Además de eso, cuenta con una integración con ACF (Advanced Custom Fields) para que puedas sumar los datos de tus campos personalizados a la API, lo mejor de todo, ¡esa extensión también es gratis!

Subscríbete a nuestro newsletter

Sólo te enviaremos contenido relevante y que está muy bueno, nada de spam, te lo prometemos.

Compártelo con tus amigos

Share on facebook
Share on linkedin
Share on twitter
Share on whatsapp
Share on reddit
Share on telegram