WordPress Headless y Faust.js: beneficios y configuración

El desarrollo de WordPress sin cabeza es una tendencia en alza en la industria del desarrollo de software, que se está moviendo paulatinamente hacia arquitecturas CMS sin cabeza. Sin embargo, algunos consideran que las soluciones actuales son un poco toscas en su ejecución.

Faust.js es un framework de WordPress sin cabeza lanzado por WP Engine que busca simplificar el proceso y mejorar la experiencia del desarrollador. Aprovechando React y Next.js, Faust.js ofrece un conjunto completo de herramientas para abordar desafíos comunes enfrentados por los desarrolladores al configurar una arquitectura de WordPress sin cabeza.

Con características como la obtención eficiente de datos, vistas previas nativas de publicaciones y aprovechando la jerarquía de plantillas de WordPress, Faust.js está posicionado para convertirse en el framework de referencia para desarrolladores que trabajan con implementaciones de WordPress sin cabeza. Exploremos sus beneficios y cómo configurarlo para tu proyecto.

¿Qué es WordPress sin cabeza?

WordPress sin cabeza es usar WordPress con una arquitectura sin cabeza en lugar de monolítica. WordPress y otros sistemas de gestión de contenido (CMS) tradicionalmente empaquetan el backend y frontend en un solo software para gestionar el contenido de un sitio. El backend combina las bases de datos y servidor(es) que hacen funcionar el sitio, y el frontend es la parte visible para los usuarios que ven e interactúan al visitar.

La arquitectura sin cabeza cambia este modelo desacoplando el backend del frontend. El CMS actúa como el backend, conectándose a una plataforma diferente para mostrar interfaces y contenido amigables en el frontend. Algunas de las tecnologías frontend más populares que los desarrolladores utilizan para implementaciones sin cabeza incluyen React, Next, Vue, Angular y Gatsby.

En este modelo, WordPress se convierte en un centro de contenido, exportando datos al frontend a través de una interfaz de programación de aplicaciones (API) que cualquier tecnología frontend puede usar.

WordPress sin cabeza es una oferta relativamente nueva. Sin embargo, ya está atrayendo atención por su potencial para ofrecer flexibilidad a los desarrolladores en sus elecciones de frontend y la escalabilidad de gestionar múltiples canales desde el mismo backend.

¿Qué es Faust.js?

Faust.js es un framework de WordPress sin cabeza lanzado a fines de 2021 por la compañía de hosting WordPress gestionado WP Engine. Proporciona las herramientas para simplificar el proceso de construir aplicaciones de frontend usando WordPress como backend sin cabeza, mejorando la experiencia del desarrollador.

Construido sobre Next.js, Faust.js busca resolver muchos de los problemas que enfrentan los desarrolladores al configurar una arquitectura de WordPress sin cabeza, como previsualización de contenido, autenticación, obtención de datos, renderizado del lado del servidor (SSR) y generación de sitios estáticos (SSG).

Las vistas previas, en particular, son uno de los mayores avances de Faust.js. Tradicionalmente ha sido un desafío previsualizar contenido en implementaciones de WordPress sin cabeza, pero Faust.js proporciona vista previa nativa desde el backend, haciendo la experiencia de publicación más cercana al WordPress monolítico tradicional.

Con esta y otras características, Faust.js proporciona funciones de ayuda y APIs amigables para los desarrolladores que ahorran tiempo al construir la estructura de un proyecto sin cabeza, buscando convertirse en el framework #1 para desarrolladores de WordPress sin cabeza usando cualquier framework de frontend.

¿Cuáles son los beneficios de Faust.js?

Obtención eficiente de datos

La versión original de Faust.js lanzada a fines de 2021 pasó por cambios significativos a lo largo de 2022. Uno de los principales cambios incluyó cambiar de GQty a Apollo como el cliente GraphQL elegido, principalmente por las limitaciones de depuración y expectativas de los desarrolladores.

Apollo es un cliente de gestión de estado para GraphQL que gestiona datos locales y remotos. Las características adicionales incluyen manejo de errores, paginación, mecanismos de almacenamiento en caché para minimizar solicitudes de red innecesarias, obtención de datos previa, integración de React Hooks y más. Apollo simplifica el trabajo con GraphQL en frameworks de JavaScript, simplificando así el desarrollo de WordPress sin cabeza.

Vista previa de publicaciones

Faust.js soporta de manera nativa las vistas previas de páginas y publicaciones, para que los editores puedan ver su contenido en el frontend como borradores sin intervención del desarrollador. Después de la configuración inicial, todos los enlaces de vista previa de páginas y publicaciones en el panel de administración funcionan tal como lo harían normalmente en un WordPress monolítico tradicional.

Jerarquía de plantillas

La jerarquía de plantillas es la lógica y estructura que las aplicaciones web de WordPress utilizan para determinar qué archivo de plantilla usar para renderizar una página o publicación específica en un sitio web. Tradicionalmente, los desarrolladores de WordPress sin cabeza tienen que dedicar mucho tiempo a conectar rutas individuales para emparejar las plantillas adecuadas con contenido específico, experimentando a menudo dificultades con rutas complejas.

Faust.js resuelve el problema de depender de soluciones de enrutamiento personalizadas al aprovechar la jerarquía de plantillas de WordPress para determinar si WordPress gestiona la URI de una solicitud de GraphQL. Esta información ayuda a los desarrolladores a decidir el tipo de plantilla que debería renderizar el contenido.

Esta solicitud preliminar de GraphQL se llama “consulta semilla”, a la cual WordPress responde con el slug, databaseID y otra información. Esta información ayuda a determinar qué plantilla(s) corresponden a una URI dada, sin un enrutamiento personalizado. La consulta semilla se ve algo así:

{

  "data": {

    "node": {

      "__typename": "Page",

      "uri": "/sample-page/",

      "id": "cG9zdDoyNjQ=",

      "databaseId": 264,

      "isContentNode": true,

      "slug": "sample-page",

      "contentType": {

        "node": {

          "name": "page"

        }

      },

      "template": {

        "templateName": "Default"

      },

      "isFrontPage": false,

      "isPostsPage": false

    }

  }

}

Extensibilidad

WP Engine entiende que una de las características más poderosas de WordPress es su ecosistema de plugins y decidió hacer Faust.js extensible, permitiendo a los desarrolladores crear sus propias funciones personalizadas.

Esencialmente, los plugins de Faust son clases de JavaScript con un método apply que contiene un parámetro llamado hooks, el cual se pasa desde @wordpress/hooks. El siguiente es un ejemplo de un plugin en TypeScript:

import { FaustHooks, FaustPlugin } from '@faustwp/core';

export class MyPlugin implements FaustPlugin {

  apply(hooks: FaustHooks) {}

}

Para un ejemplo real, mirá este plugin de Jason Bahl, creador y mantenedor de WPGraphQL. Añade soporte para consultas persistentes automáticas.

Cómo configurar Faust.js para tu implementación de WordPress sin cabeza

Para empezar a construir sitios de WordPress sin cabeza con Faust.js, ejecutá el siguiente código en un directorio de tu elección:

npx create-next-app 

    -e https://github.com/wpengine/faustjs/tree/main 

    --example-path examples/next/faustwp-getting-started 

    --use-npm

Probablemente tomará un par de minutos. Una vez que se completen los preparativos, movete a tu nuevo proyecto en my-app y copiá el template de ambiente de ejemplo:

cp .env.local.sample .env.local

Ahora ejecutá el servidor de desarrollo:

npm run dev

Tu proyecto ahora está ubicado en http://localhost:3000 y está cargando publicaciones y páginas del sitio de ejemplo de WP Engine. Para conectar tu proyecto Faust.js a un sitio WordPress específico, primero asegurate de haber instalado y activado los plugins WPGraphQL y Faust.js. Una vez instalados, abrí el archivo .env.local de los pasos anteriores. Así es como luce por defecto:

# La URL de tu sitio WordPress

NEXT_PUBLIC_WORDPRESS_URL=https://faustexample.wpengine.com

# Clave secreta del plugin que se encuentra en Configuraciones->Headless

FAUST_SECRET_KEY=YOUR_PLUGIN_SECRET

Reemplazá https://faustexample.wpengine.com con la URL de tu sitio (incluyendo el https://) y YOUR_PLUGIN_SECRET con la clave secreta que encontrarás en Configuraciones > Faust en tu panel de administración de WordPress. Necesitás ingresar la clave secreta para soportar vistas previas de publicaciones y páginas.

Ahora es el momento de configurar la URL del sitio frontend. Andá a la configuración del plugin Faust.js e ingresá la URL en el campo URL del sitio frontend. Puede ser una URL en vivo o http://localhost:3000. Este paso también asegura que podás usar la característica de vista previa de publicaciones y páginas.

Finalmente, dirigite a Panel de control > Configuraciones > Enlaces permanentes. Navegá a la sección Configuraciones comunes y asegurate de que no esté configurado en Simple. Podés elegir cualquier otra configuración excepto Simple.

¡Y listo! Ahora podés empezar a editar tu sitio de WordPress sin cabeza usando Faust.js.

Faust.js hace que el desarrollo de WordPress sin cabeza sea menos intimidante

Faust.js es un framework de desarrollo en JavaScript diseñado específicamente para crear sitios web de WordPress sin cabeza, flexibles, rápidos, escalables y extensibles. Permite a los desarrolladores construir interfaces de usuario modernas y altamente interactivas usando tecnologías web como React y Next.js, conectadas al backend de WordPress a través de una API GraphQL.

A pesar de ser bastante nuevo, Faust.js está comenzando a destacar como una de las soluciones más avanzadas para WordPress sin cabeza debido a su integración perfecta con WordPress, su enfoque en el desarrollo basado en componentes, alto rendimiento, y flexibilidad para usar cualquier tecnología de frontend.

Si estás interesado en WordPress sin cabeza, mirá nuestro blog para más consejos, guías y conocimientos.