El desarrollo de WordPress sin cabeza es una tendencia en alza en la industria del desarrollo de software, que se est\u00e1 moviendo paulatinamente hacia arquitecturas CMS sin cabeza. Sin embargo, algunos consideran que las soluciones actuales son un poco toscas en su ejecuci\u00f3n.<\/p>\n\n\n\n
Faust.js<\/a> es un framework de WordPress sin cabeza lanzado por WP Engine<\/a> 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\u00edos comunes enfrentados por los desarrolladores al configurar una arquitectura de WordPress sin cabeza.<\/p>\n\n\n\n Con caracter\u00edsticas como la obtenci\u00f3n eficiente de datos, vistas previas nativas de publicaciones y aprovechando la jerarqu\u00eda de plantillas de WordPress, Faust.js est\u00e1 posicionado para convertirse en el framework de referencia para desarrolladores que trabajan con implementaciones de WordPress sin cabeza. Exploremos sus beneficios y c\u00f3mo configurarlo para tu proyecto.<\/p>\n\n\n\n WordPress sin cabeza es usar WordPress con una arquitectura sin cabeza<\/a> en lugar de monol\u00edtica. WordPress y otros sistemas de gesti\u00f3n 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\u00faan al visitar.<\/p>\n\n\n\n La arquitectura sin cabeza cambia este modelo desacoplando el backend del frontend. El CMS act\u00faa como el backend, conect\u00e1ndose a una plataforma diferente para mostrar interfaces y contenido amigables en el frontend. Algunas de las tecnolog\u00edas frontend m\u00e1s populares que los desarrolladores utilizan para implementaciones sin cabeza incluyen React, Next, Vue, Angular y Gatsby.<\/p>\n\n\n\n En este modelo, WordPress se convierte en un centro de contenido, exportando datos al frontend a trav\u00e9s de una interfaz de programaci\u00f3n de aplicaciones (API) que cualquier tecnolog\u00eda frontend puede usar.<\/p>\n\n\n\n WordPress sin cabeza es una oferta relativamente nueva. Sin embargo, ya est\u00e1 atrayendo atenci\u00f3n por su potencial para ofrecer flexibilidad a los desarrolladores en sus elecciones de frontend y la escalabilidad de gestionar m\u00faltiples canales desde el mismo backend.<\/p>\n\n\n\n Faust.js<\/a> es un framework de WordPress sin cabeza lanzado a fines de 2021 por la compa\u00f1\u00eda de hosting WordPress gestionado WP Engine<\/a>. Proporciona las herramientas para simplificar el proceso de construir aplicaciones de frontend usando WordPress como backend sin cabeza, mejorando la experiencia del desarrollador.<\/p>\n\n\n\n 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\u00f3n de contenido, autenticaci\u00f3n, obtenci\u00f3n de datos, renderizado del lado del servidor (SSR) y generaci\u00f3n de sitios est\u00e1ticos (SSG).<\/p>\n\n\n\n Las vistas previas, en particular, son uno de los mayores avances de Faust.js. Tradicionalmente ha sido un desaf\u00edo previsualizar contenido en implementaciones de WordPress sin cabeza, pero Faust.js proporciona vista previa nativa desde el backend, haciendo la experiencia de publicaci\u00f3n m\u00e1s cercana al WordPress monol\u00edtico tradicional.<\/p>\n\n\n\n Con esta y otras caracter\u00edsticas, 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.<\/p>\n\n\n\n La versi\u00f3n original de Faust.js lanzada a fines de 2021 pas\u00f3 por cambios significativos a lo largo de 2022. Uno de los principales cambios incluy\u00f3 cambiar de GQty<\/a> a Apollo<\/a> como el cliente GraphQL elegido, principalmente por las limitaciones de depuraci\u00f3n y expectativas de los desarrolladores.<\/p>\n\n\n\n Apollo es un cliente de gesti\u00f3n de estado para GraphQL que gestiona datos locales y remotos. Las caracter\u00edsticas adicionales incluyen manejo de errores, paginaci\u00f3n, mecanismos de almacenamiento en cach\u00e9 para minimizar solicitudes de red innecesarias, obtenci\u00f3n de datos previa, integraci\u00f3n de React Hooks y m\u00e1s. Apollo simplifica el trabajo con GraphQL en frameworks de JavaScript, simplificando as\u00ed el desarrollo de WordPress sin cabeza.<\/p>\n\n\n\n Faust.js soporta de manera nativa las vistas previas de p\u00e1ginas y publicaciones, para que los editores puedan ver su contenido en el frontend como borradores sin intervenci\u00f3n del desarrollador. Despu\u00e9s de la configuraci\u00f3n inicial<\/a>, todos los enlaces de vista previa de p\u00e1ginas y publicaciones en el panel de administraci\u00f3n funcionan tal como lo har\u00edan normalmente en un WordPress monol\u00edtico tradicional.<\/p>\n\n\n\n La jerarqu\u00eda de plantillas es la l\u00f3gica y estructura que las aplicaciones web de WordPress utilizan para determinar qu\u00e9 archivo de plantilla usar para renderizar una p\u00e1gina o publicaci\u00f3n espec\u00edfica 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\u00edfico, experimentando a menudo dificultades con rutas complejas.<\/p>\n\n\n\n Faust.js resuelve el problema de depender de soluciones de enrutamiento personalizadas al aprovechar la jerarqu\u00eda de plantillas de WordPress para determinar si WordPress gestiona la URI de una solicitud de GraphQL. Esta informaci\u00f3n ayuda a los desarrolladores a decidir el tipo de plantilla que deber\u00eda renderizar el contenido. <\/p>\n\n\n\n Esta solicitud preliminar de GraphQL se llama \u201cconsulta semilla\u201d, a la cual WordPress responde con el slug, databaseID y otra informaci\u00f3n. Esta informaci\u00f3n ayuda a determinar qu\u00e9 plantilla(s) corresponden a una URI dada, sin un enrutamiento personalizado. La consulta semilla se ve algo as\u00ed:<\/p>\n\n\n\n WP Engine entiende que una de las caracter\u00edsticas m\u00e1s poderosas de WordPress es su ecosistema de plugins y decidi\u00f3 hacer Faust.js extensible, permitiendo a los desarrolladores crear sus propias funciones personalizadas.<\/p>\n\n\n\n Esencialmente, los plugins de Faust son clases de JavaScript con un m\u00e9todo Para un ejemplo real, mir\u00e1 este plugin<\/a> de Jason Bahl, creador y mantenedor de WPGraphQL. A\u00f1ade soporte para consultas persistentes autom\u00e1ticas.<\/p>\n\n\n\n Para empezar a construir sitios de WordPress sin cabeza con Faust.js, ejecut\u00e1 el siguiente c\u00f3digo en un directorio de tu elecci\u00f3n:<\/p>\n\n\n\n Probablemente tomar\u00e1 un par de minutos. Una vez que se completen los preparativos, movete a tu nuevo proyecto en my-app<\/strong> y copi\u00e1 el template de ambiente de ejemplo:<\/p>\n\n\n\n Ahora ejecut\u00e1 el servidor de desarrollo:<\/p>\n\n\n\n Tu proyecto ahora est\u00e1 ubicado en http:\/\/localhost:3000<\/a> y est\u00e1 cargando publicaciones y p\u00e1ginas del sitio de ejemplo<\/a> de WP Engine. Para conectar tu proyecto Faust.js a un sitio WordPress espec\u00edfico, primero asegurate de haber instalado y activado los plugins WPGraphQL<\/a> y Faust.js<\/a>. Una vez instalados, abr\u00ed el archivo .env.local<\/strong> de los pasos anteriores. As\u00ed es como luce por defecto:<\/p>\n\n\n\n Reemplaz\u00e1 Ahora es el momento de configurar la URL del sitio frontend. And\u00e1 a la configuraci\u00f3n del plugin Faust.js e ingres\u00e1 la URL en el campo URL del sitio frontend<\/strong>. Puede ser una URL en vivo o http:\/\/localhost:3000<\/a>. Este paso tambi\u00e9n asegura que pod\u00e1s usar la caracter\u00edstica de vista previa de publicaciones y p\u00e1ginas.<\/p>\n\n\n\n\u00bfQu\u00e9 es WordPress sin cabeza?<\/h2>\n\n\n\n
\u00bfQu\u00e9 es Faust.js?<\/h2>\n\n\n\n
\u00bfCu\u00e1les son los beneficios de Faust.js?<\/h2>\n\n\n\n
Obtenci\u00f3n eficiente de datos<\/h3>\n\n\n\n
Vista previa de publicaciones<\/h3>\n\n\n\n
Jerarqu\u00eda de plantillas<\/h3>\n\n\n\n
{\n\n \"data\": {\n\n \"node\": {\n\n \"__typename\": \"Page\",\n\n \"uri\": \"\/sample-page\/\",\n\n \"id\": \"cG9zdDoyNjQ=\",\n\n \"databaseId\": 264,\n\n \"isContentNode\": true,\n\n \"slug\": \"sample-page\",\n\n \"contentType\": {\n\n \"node\": {\n\n \"name\": \"page\"\n\n }\n\n },\n\n \"template\": {\n\n \"templateName\": \"Default\"\n\n },\n\n \"isFrontPage\": false,\n\n \"isPostsPage\": false\n\n }\n\n }\n\n}<\/code><\/pre>\n\n\n\nExtensibilidad<\/h3>\n\n\n\n
apply<\/code> que contiene un par\u00e1metro llamado hooks<\/code>, el cual se pasa desde @wordpress\/hooks<\/code>. El siguiente es un ejemplo de un plugin en TypeScript:<\/p>\n\n\n\nimport { FaustHooks, FaustPlugin } from '@faustwp\/core';\n\nexport class MyPlugin implements FaustPlugin {\n\n apply(hooks: FaustHooks) {}\n\n}<\/code><\/pre>\n\n\n\nC\u00f3mo configurar Faust.js para tu implementaci\u00f3n de WordPress sin cabeza<\/h2>\n\n\n\n
npx create-next-app \n\n -e https:\/\/github.com\/wpengine\/faustjs\/tree\/main \n\n --example-path examples\/next\/faustwp-getting-started \n\n --use-npm<\/code><\/pre>\n\n\n\ncp .env.local.sample .env.local<\/code><\/pre>\n\n\n\nnpm run dev<\/code><\/pre>\n\n\n\n# La URL de tu sitio WordPress\n\nNEXT_PUBLIC_WORDPRESS_URL=https:\/\/faustexample.wpengine.com\n\n# Clave secreta del plugin que se encuentra en Configuraciones->Headless\n\nFAUST_SECRET_KEY=YOUR_PLUGIN_SECRET<\/code><\/pre>\n\n\n\nhttps:\/\/faustexample.wpengine.com<\/code> con la URL de tu sitio (incluyendo el https:\/\/<\/code>) y YOUR_PLUGIN_SECRET<\/code> con la clave secreta que encontrar\u00e1s en Configuraciones<\/strong> > Faust<\/strong> en tu panel de administraci\u00f3n de WordPress. Necesit\u00e1s ingresar la clave secreta para soportar vistas previas de publicaciones y p\u00e1ginas.<\/p>\n\n\n\n