Hoy en día es posible crear páginas web utilizando la administración de WordPress asociada a un generador estático. Tienes acceso a lo mejor de ambos mundos: WordPress para gestionar el contenido y Nuxt.js… para generar páginas optimizadas, ligeras y accesibles.
NB: Nuxt.js a partir de la versión 2.13.0 sólo puede entregar contenido estático (lo que no ocurría en las versiones anteriores)
¿Por qué sustituir el sistema de temas de WordPress?
WordPress es excelente por su interfaz de administración y su gestión de contenidos. Pero el entorno propuesto para crear la parte visible del sitio web, o sea los archivos del directorio /themes/ WordPress a veces no se adapta a algunos proyectos.
Lo que se suele reprochar a WordPress: esas numerosas llamadas a la base de datos sólo para mostrar una página de contenido. Puede haber docenas de consultas ocultas y que consumen mucho tiempo, incluso cuando el visitante quiere mostrar un artículo o una página estándar. Sobre todo porque los contenidos de muchos sitios que utilizan WordPress cambian muy poco o nada.
¿No podríamos hacerlo de otra manera y generar páginas estáticas, que no hagan ninguna llamada a la base de datos? ¿No te parece más coherente?
Ahí es donde entra el concepto de generador de sitios estáticos, como por ejemplo Nuxt.js.
¿Qué es un generador de sitios estáticos?
Esta herramienta genera en un momento dado una versión estática a partir de un contenido procedente de una base de datos.
Un generador es una de las soluciones cuando se quiere optimizar un sitio web cuyo contenido no cambia constantemente, como un blog o un sitio de exposición. Ensamblará los contenidos dinámicos (los de la base de datos) con el diseño css / html y producirá páginas html, conteniendo css y js y sólo contenidos html / css / js. Estas páginas se servirán cuando un usuario las solicite. Sin código del lado del servidor, sin consultas SQL.
Pongamos un ejemplo.
Un usuario quiere acceder a un artículo del blog en la página: /blog/mi-artículo
En el caso de WordPress y su sistema de temas incorporados, el usuario que visita la página /blog/mi-artículo hará realmente una petición http al servidor para verificar la existencia de la página /blog/mi-artículo. Como realmente no existe, la petición http se envía de vuelta a los archivos del núcleo de WordPress que proporcionarán las directivas para mostrar la página en cuestión. Por ejemplo, llamar a un script en la cabecera, aplicar modificaciones al contenido del artículo a través de un plugin, recuperar el contenido del artículo de la base de datos haciendo una consulta SQL, que a su vez abre una autenticación al servidor SQL, etc. La lista suele ser mucho más larga.
En el caso de Nuxt.js, el usuario realiza una petición http al servidor que busca la página o carpeta /blog/mi-artículo. Efectivamente, encontrará la página /blog/mi-artículo/index.html (generada previamente por nuxt). Eso es todo, la página se muestra, sin petición SQL, sin ejecución de código del lado del servidor (Php u otros).
Es como si todo el sitio web estuviera hecho de páginas estáticas que se crean una a una.
¿Por qué utilizar un generador de sitios estáticos como Nuxt.js?
El generador de sitios estáticos es una potente herramienta que ofrece muchas funciones para optimizar sus páginas web.
Las páginas serán más rápidas de visualizar gracias a la minificación del código html, javascript, css. Optimización de las imágenes, navegación rápida y transiciones agradables de las páginas, contenido accesible y optimizado para el SEO. Utilizar un generador tiene muchas ventajas.
También es muy agradable desarrollarse en un entorno con tanta flexibilidad. Por último, permite utilizar un solo lenguaje: javascript.
Hay muchos generadores, entre los más famosos : gatsby y nuxt.js
La API REST de WordPress, puente entre los dos mundos
Probablemente se esté haciendo una pregunta legítima. ¿Cómo elegir otro sistema que no sea el tema de WordPress para mostrar el contenido de WordPress?
La API de WordPress es el eslabón perdido. En pocas palabras, la API de WordPress es capaz de proporcionar el contenido de un sitio web en bruto a cualquier persona o herramienta que visite una url predefinida.
Por ejemplo, si quieres mostrar todas las entradas de un blog de WordPress. La API devolverá una lista de entradas con título, contenido, autor, fecha, etc. La url /wp-json/wp/v2/posts?per_page=10 devolverá un objeto json con los últimos 10 posts.
Usted es libre de manipular este objeto json, ahora que está disponible y es fácil de integrar.
En resumen, la API de WordPress es una puerta más para acceder a todo (o casi todo) el contenido de un sitio de WordPress. Y cualquier tipo de proyecto/aplicación puede hacer llamadas a la API. Incluso se puede imaginar un proyecto Java que consulte la API de WordPress e integre los resultados en un sitio Drupal. Por qué no. El interés de la API es proporcionar un contenido agnóstico y universal.
WordPress también es un CMS headless
A veces se encontrará con este término bárbaro (¡CMS headless!), que es una categoría específica de CMS. Headless CMS, a diferencia de los CMS tradicionales, no proporciona un entorno o ecosistema para mostrar el contenido. En su lugar, proporciona una API.
WordPress con su API ofrece esta posibilidad de ser utilizado como un CMS headless ya que podemos liberarnos de su sistema de temas. El escritor se beneficia de la interfaz de administración de WordPress, el lector accede al contenido de forma rápida, optimizada y accesible. Y el servidor se mantiene al mínimo. La pila necesaria para lograr un proyecto como éste no es compleja, pero requiere repensar el funcionamiento del sitio web.
Cambio de un tema de WordPress a un proyecto Nuxt.js
Antes: se necesita un único servidor, que aloja la base de datos, y el alojamiento de las páginas PHP (incluyendo WordPress) y todas las imágenes, javascript, archivos css, etc.
Después : un servidor que aloja la administración de WordPress y que tiene las mismas capacidades que antes.
Otro servidor o un nuevo servicio en el mismo servidor capaz de generar páginas estáticas. En el caso de Nuxt.js es necesario instalar node.js e instalar Nuxt.js. Sin embargo, la alternativa que utilizo es un servicio gratuito de llave en mano, Netlify. Este servicio es capaz de generar contenido estático desde un proyecto nuxt.js y servirlo a los lectores. Y es gratis.
Sin entrar en detalles, es necesario repensar algunas de las funcionalidades de su sitio y explorar las nuevas posibilidades que Nuxt puede ofrecerle. Es interesante y, en general, fácil de aplicar.
Conclusión:
La API de WordPress es una puerta abierta a un nuevo mundo para los desarrolladores que quieren ofrecer a los usuarios una experiencia de administración de WordPress y, al mismo tiempo, proporcionar a los lectores páginas personalizadas y de alta calidad.