WordPress es uno de los sistemas de gestión de contenidos (CMS) más populares, utilizado por 810 millones de usuarios, ¡es decir, el 41% de todo Internet! Es la opción preferida para cualquiera que quiera crear rápidamente un sitio web porque es sencillo, fácil de usar, ofrece una gran variedad de opciones de personalización y, además, cuenta con un sólido ecosistema de plugins y otros recursos.

Una forma de sacar el máximo partido a WordPress es utilizarlo headless.

Un CMS headless, también conocido como sistema headless, es un tipo de CMS backend que se utiliza únicamente para gestionar contenidos. Esto te ayuda a integrar contenidos en cualquier sistema o sitio web con sólo llamar a las API del CMS headless.

Sin embargo, esto deja el frontend para gestionar por separado. Aquí es donde entra en juego una API.

Las API permiten que dos o más aplicaciones diferentes intercambien datos. En este caso, la API se utiliza para transferir los datos del CMS a un sitio web frontend, proporcionando más flexibilidad y un rendimiento más rápido.

En este artículo, exploraremos qué es un CMS headless, por qué querrías crear uno y cómo configurarlo para WordPress.

¿Qué Es un Sitio WordPress Headless?

Un sitio web WordPress headless es un tipo de sitio que utiliza principalmente WordPress como CMS, o sistema de gestión de contenidos, y utiliza otras tecnologías frontales como React o Vue para el frontend.

Las bibliotecas y frameworks JavaScript se utilizan para mostrar los contenidos del sitio web. Por lo tanto, un WordPress headless tiene un frontend y un backend separados, y se utiliza una API para la comunicación.

En términos más sencillos, una arquitectura headless significa que el CMS sólo se utiliza para almacenar y gestionar tu contenido, y no se preocupa del frontend del sitio web.

Por otro lado, la principal tarea del frontend es mostrar el contenido, y a éste, a su vez, le da igual dónde se almacene o gestione el contenido, siempre que pueda llegar a él.

Un WordPress headless tiene mejor rendimiento, ya que las peticiones del frontend son gestionadas por tecnologías más rápidas, como React, y sólo el backend es gestionado por WordPress. La separación entre frontend y backend permite escalar los componentes de forma independiente.

Pros y Contras de WordPress Headless

Como ocurre con todas las opciones de desarrollo, optar por una solución WordPress headless tiene ventajas e inconvenientes. Es importante entender ambas cosas antes de tomar una decisión.

Ventajas de WordPress Headless

Algunas de las principales ventajas de una implementación de WordPress headless son las siguientes:

  • Flexibilidad: WordPress Headless permite a los desarrolladores crear experiencias frontales personalizadas sin estar limitados por el sistema tradicional de temas de WordPress. Esto significa que puedes crear interfaces de usuario y experiencias únicas para necesidades específicas.
  • Rendimiento: Separar el frontend del backend de un sitio WordPress puede hacer que tu sitio web se cargue más rápido y aumente su rendimiento, ya que el servidor sólo entrega datos a través de una API, en lugar de renderizar también HTML para cada solicitud.
  • Seguridad: Al separar el frontend y el backend, WordPress headless puede proporcionar una capa adicional de seguridad al limitar el acceso a la base de código y a la base de datos subyacentes de WordPress.

Contras de WordPress headless

Los inconvenientes de WordPress headless pueden ser:

  • Falta de temas: Como WordPress headless no se basa en temas predefinidos, tendrás que crear tus propios temas personalizados. Esto puede llevar mucho tiempo y requerir recursos adicionales.
  • Coste: Desarrollar un sitio de WordPress headless puede ser más caro que un sitio de WordPress tradicional, ya que requiere más conocimientos técnicos y recursos para configurarlo y mantenerlo.
  • Limitaciones de los plugins: Algunos plugins de WordPress pueden no funcionar con WordPress headless, ya que dependen de los temas de WordPress para funcionar correctamente.

¿Qué es la API REST de WordPress?

La API REST de WordPress se utiliza como interfaz entre el backend y el frontend. Con la API, se pueden enviar o recuperar datos del sitio con facilidad, ya que la API tiene acceso de control a los datos del sitio. También garantiza que sólo los usuarios autorizados puedan interactuar con ella.

La API admite una amplia gama de formatos de datos, incluido JSON, lo que facilita la interacción con el sistema.

La API REST de WordPress es una potente herramienta para que los desarrolladores creen, actualicen o eliminen datos, además de crear funcionalidades personalizadas para los sitios o integrarse con otro servicio. Además, hay plugins disponibles que amplían la funcionalidad de la API, como la integración de métodos de autenticación adicionales.

¿Qué es React?

React es una biblioteca JavaScript para construir interfaces de usuario. Es una biblioteca frontend de código abierto, reutilizable y basada en componentes, que permite a los desarrolladores construir componentes de interfaz de usuario (UI) utilizando una sintaxis declarativa.

React crea una interfaz de usuario interactiva y muestra los componentes cuando cambian los datos. La biblioteca es muy popular entre los desarrolladores que buscan crear componentes complejos y reutilizables, gestionar el estado de forma eficiente y actualizar fácilmente la interfaz de usuario en tiempo real.

La sólida comunidad de desarrolladores de React ha creado un conjunto de herramientas, bibliotecas y recursos para mejorar la funcionalidad de la biblioteca. Muchas organizaciones y empresas están adoptando React como tecnología para crear aplicaciones web complejas, dinámicas y de rápido rendimiento.

Empresas populares que utilizan React.js using React
Empresas populares que utilizan React.js (fuente: inexture.com)

¿Por qué usar React?

React ofrece muchas ventajas que lo convierten en una opción excelente para desarrollar aplicaciones web complejas y dinámicas.

Estas son algunas de las principales ventajas de usar React:

  • Sintaxis declarativa: React utiliza un enfoque declarativo para construir componentes de interfaz de usuario, lo que facilita la creación de componentes reutilizables y altamente eficientes.
  • Gran comunidad y ecosistema: React cuenta con una amplia y activa comunidad de desarrolladores, que ha dado lugar a la creación de una amplia gama de herramientas y bibliotecas para mejorar su funcionalidad.
  • DOM virtual: React utiliza el DOM virtual para actualizar la interfaz de usuario en tiempo real. Esto significa que cuando cambia el estado, sólo actualiza los componentes que necesitan ser cambiados, en lugar de volver a renderizar toda la página.
  • Reutilización: React.js ofrece componentes reutilizables que pueden usarse en diferentes aplicaciones, lo que reduce significativamente el tiempo y el esfuerzo de desarrollo.

Cómo Crear un Sitio WordPress Headless con React

Ahora es el momento de ensuciarnos las manos y aprender a crear y desplegar un sitio WordPress headless con React.

Sigue leyendo para aprender.

Requisitos previos

Antes de empezar con este tutorial, asegúrate de que tienes:

Paso 1. Configurar un sitio web WordPress

Empecemos por configurar el sitio web de WordPress, ya que servirá como fuente de datos para la aplicación React. Si ya tienes configurado un sitio web WordPress, puedes saltarte esta sección; de lo contrario, sigue el procedimiento.

En este tutorial, utilizaremos DevKinsta, un entorno de desarrollo local muy utilizado, rápido y fiable, para crear, desarrollar y desplegar sitios de WordPress. Su uso es totalmente gratuito: sólo tienes que descargarlo del sitio web oficial e instalarlo en tu sistema.

Una vez completada la instalación, abre el panel de control de DevKinsta y haz clic en Nuevo sitio WordPress para crear un nuevo sitio WordPress.

Rellena los datos necesarios y pulsa el botón Crear sitio para continuar.

Página de creación del sitio DevKinsta
Página de creación del sitio DevKinsta

Esto puede llevar unos minutos, pero una vez creado tu sitio web, puedes acceder a él y a su panel de administración pulsando en «Abrir sitio» o en las opciones de WP Admin respectivamente.

A continuación, para habilitar la API JSON, tendrás que actualizar los permalinks de tu sitio web.

En el panel de administración de WordPress, haz clic en Ajustes, seguido de Enlaces permanentes. Elige la opción Nombre de la entrada y haz clic en Guardar cambios.

Configuración de Permalink de WordPress.
Configuración de Permalink de WordPress

También puedes utilizar herramientas como Postman para probar y enviar fácilmente peticiones a las API REST de WordPress.

Paso 2: Configurar una aplicación React

Ahora que tenemos nuestro sitio web WordPress configurado, podemos empezar a trabajar en el frontend. Como ya hemos mencionado, en este tutorial utilizaremos React para el frontend de nuestra aplicación.

Para empezar, ejecuta el siguiente código en tu terminal para crear una aplicación React.

npm create vite@latest my-blog-app 
cd my-blog-app 
npm install

Los comandos anteriores crearán una aplicación React e instalarán las dependencias necesarias.

También necesitamos instalar Axios, una biblioteca JavaScript para realizar peticiones HTTP. Ejecuta el siguiente comando para instalarla.

npm install axios

Ahora, para iniciar el servidor de desarrollo, puedes ejecutar npm run dev en el terminal. A continuación, el servidor debería inicializar tu aplicación en http://127.0.0.1:5173.

Página de inicio Vite + React.
Página de inicio Vite + React

A continuación, abre tu proyecto en tu editor de código favorito y elimina todos los archivos innecesarios que no necesites, como la carpeta assets, index.css y app.css.

También puedes sustituir el código dentro de main.jsx y App.jsx por el siguiente código:

// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
// App.jsx

import React from 'react'

export default function App() {
  return (
    <App />
  )
}

Paso 3: Recuperar las entradas de WordPress

Ahora es el momento de recuperar las entradas de nuestro sitio web WordPress.

Dentro del App.jsx, añade el siguiente estado e importa <code>useState</code> de React:

const [posts, setPosts] = useState([])

useState es un gancho incorporado en React que se utiliza para añadir estados a un componente, un estado referido a datos o a una propiedad.

posts se utiliza para obtener los datos del estado, y setPosts se utiliza para añadir nuevos datos al estado. También hemos pasado un array vacío a state por defecto.

A continuación, añade el siguiente código después del estado para obtener las entradas de la API REST de WordPress:

const fetchPosts = () => {
    // Using axios to fetch the posts
    axios
      .get("http://headless-wordpress-website.local/wp-json/wp/v2/posts")
      .then((res) => {
        // Saving the data to state
        setPosts(res.data);
      });
  }


  // Calling the function on page load
  useEffect(() => {
    fetchPosts()
  }, [])

El código anterior ejecuta la función fetchPosts() al cargar la página. Dentro de la función fetchPosts(), enviamos una solicitud GET a la API de WordPress utilizando Axios para recuperar las entradas y guardarlas en el estado que declaramos anteriormente.

Paso 4: Crear un componente de blog

Dentro del directorio raíz, crea una nueva carpeta llamada components, y dentro de ella, crea dos nuevos archivos: blog.jsx y blog.css.

En primer lugar, añade el siguiente código a blog.jsx:

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./blog.css";

export default function Blog({ post }) {
  const [featuredImage, setFeaturedimage] = useState();

  const getImage = () => {
    axios
     .get(post?._links["wp:featuredmedia"][0]?.href)
     .then((response) => {
      setFeaturedimage(response.data.source_url);
    });
  };

  useEffect(() => {
    getImage();
  }, []);

  return (
    <div class="container">
      <div class="blog-container">
        <p className="blog-date">
          {new Date(Date.now()).toLocaleDateString("en-US", {
            day: "numeric",
            month: "long",
            year: "numeric",
          })}
        </p>
        <h2 className="blog-title">{post.title.rendered}</h2>
        <p
          className="blog-excerpt"
          dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
        />
        <img src={featuredImage} class="mask" />
      </div>
    </div>
  );
}

En el código anterior, hemos creado un componente de tarjeta que toma la propiedad posts que contiene la información sobre la entrada del blog desde la API de WordPress.

En la función getImage(), utilizamos Axios para obtener la URL de la imagen destacada y luego guardamos esa información en el estado.

A continuación, añadimos un gancho useEffect para llamar a la función getImage() una vez montado el componente. También añadimos la sentencia return en la que estamos renderizando los datos de la entrada, el título, el extracto y la imagen.

A continuación, añade los siguientes estilos al archivo blog.css:

@import url("https://fonts.googleapis.com/css?family=Poppins");

.blog-container {
  width: 400px;
  height: 322px;
  background: white;
  border-radius: 10px;
  box-shadow: 0px 20px 50px #d9dbdf;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

img {
  width: 400px;
  height: 210px;
  object-fit: cover;
  overflow: hidden;
  z-index: 999;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.blog-title {
  margin: auto;
  text-align: left;
  padding-left: 22px;
  font-family: "Poppins";
  font-size: 22px;
}

.blog-date {
  text-align: justify;
  padding-left: 22px;
  padding-right: 22px;
  font-family: "Poppins";
  font-size: 12px;
  color: #c8c8c8;
  line-height: 18px;
  padding-top: 10px;
}

.blog-excerpt {
  text-align: justify;
  padding-left: 22px;
  padding-right: 22px;
  font-family: "Poppins";
  font-size: 12px;
  color: #8a8a8a;
  line-height: 18px;
  margin-bottom: 13px;
}

A continuación, en el archivo App.jsx, añade el siguiente código en la sentencia return para renderizar el componente blog:

<div>
	{posts.map((item) => (
		<Blog post={item} />
	))}
</div>;

Por último, este es el aspecto que debe tener tu App.jsx:

import React, { useEffect, useState } from 'react'
import axios from "axios"
import Blog from './components/Blog';

export default function App() {
  const [posts, setPosts] = useState([]);

  const fetchPosts = () => {
    axios
      .get("http://my-awesome-website.local/wp-json/wp/v2/posts")
      .then((res) => {
        setPosts(res.data);
      });
  }

  useEffect(() => {
    fetchPosts()
  }, [])

  return (
    <div>
      {posts.map((item) => (
        <Blog
          post={item}
        />
      ))}
    </div>
  )
}

Guarda el archivo y actualiza la pestaña de tu navegador. Ahora deberías poder ver las entradas de tu blog en la página.

WordPress headless con React.js.
WordPress headless con React.js

Resumen

WordPress Headless ofrece una forma genial de crear sitios web de rápido rendimiento con una arquitectura escalable. Con el uso de React y la API REST de WordPress, es más fácil que nunca crear sitios web dinámicos e interactivos con WordPress como sistema de gestión de contenidos.

Igual de importante para la velocidad es dónde alojas tu sitio WordPress. Kinsta está en una posición única para ofrecer una experiencia de alojamiento de WordPress ultrarrápida con máquinas Google C2 de primera línea en su Red de Nivel Premium, así como una integración con Cloudflare para bloquear tu sitio contra la pérdida de datos y los ataques maliciosos.

¿Has creado – o estás pensando en crear – un sitio web WordPress headless con React? Háznoslo saber en la sección de comentarios más abajo!

Suhail Kakar

Suhail es un desarrollador de software especializado en el desarrollo de aplicaciones web y móviles full-stack. Colabora activamente en proyectos de código abierto y disfruta creando aplicaciones Web3.