Astro.js y WordPress, una combinación ideal para desarrollos Headless

Juntos son una arquitectura Frontend y Backend con infinitas posibilidades

¿Qué es Astro?

Astro es un framework orientado a la creación de sitios web. Tiene un enfoque centrado en la creación de contenido. Es ideal para desarrollar blogs, sitios centrados en marketing, portafolios, sitios de documetación, landing pages hasta comercio electrónico (e-commerce), siendo este último más limitado donde será necesario el uso de otras herramientas complementarias.

Con Astro vas a disfrutar de una experiencia de desarrollo más optimizada. Crearás sitios web centrados en el contenido y obtendrás un mejor resultado frente a otros frameworks o librerías.

¿Se pude crear una SPA? Aunque Astro esté orientado al contenido, también vas a poder desarrollar una SPA (Aplicación de una sola página).

Astro es un framework agnóstico, es decir, es flexible en el uso de cualquier lenguaje de programación. Se pueden usar componentes de Vue, React, Solid, Svelte, Preact o nativos con Web Components entre otros.

¿Cómo se gestionan los contenidos en Astro?

Astro te lo pone muy fácil, se puede crear un contenido rico mediante el lenguaje Markdown o permite manejarlo a través de un CMS externo, lo que viene a ser una arquitectura Headless. Con algunos CMS como WordPress, Contenfull, Storyblock…

En este artículo vamos a centrarnos en como construir proyectos con Astro y WordPress Headless. Repasamos algunas ventajas e inconvenientes de usar Astro, y llegaremos a una conclusión de cuando lo usaremos para clientes.

¿Por qué Astro?

Ventajas:

• Es fácil de utilizar si sabes escribir HTML, CSS y JavaScript.
• Es mucho más rápido construir proyectos.
• Muy buena Experiencia de desarrollo para usuarios.
• Dispone de un repositorio de Templates y funciones basadas en código existente.
• Los sitios creados con Astro son ultra rápidos, no incluyen Javascript del lado del cliente de forma predeterminada.
• Totalmente pensado para el SEO.
• Se renderiza en el lado del servidor (SSR).
• Disponible un repositorio con mas de 100 integraciones para cubrir cualquier necesidad.

Inconvenientes:

Cualquier sección que necesite usar Javascript es un inconveniente para Astro como:

• Validaciones de formularios del lado del cliente.
• Mostrar datos en tiempo real.
• Elementos interactivos que ayudan a mejorar la accesibilidad.
• Búsquedas o filtros con la necesidad de NO actualizar la página completa.

Arquitectura en Islas

¡Que no cunda el pánico!.

Astro posee una arquitectura de interfaz basada en Islas. Las islas te permiten usar Javascript en algunas partes específicas de la página, es una buena práctica para optimizar el rendimiento de componentes interactivos.

Estos componentes interactivos (como un Header o un carrusel de imágenes) se ejecutan aislados del resto del HTML estático. Las islas pueden compartir estado y comunicarse entre sí a pesar de estar en diferentes contextos de componentes.

Por defecto, Astro renderiza los componentes de la interfaz de usuario solo en HTML y CSS, eliminando el JavaScript del lado del cliente. Para hacer un componente interactivo, se usa una directiva client:* que permite optimizar la carga de JavaScript solo para los componentes necesarios.

• client:load => Con esta directiva, los elementos en la interfaz de usuario visibles, deben ser interactivos lo antes posibles.
• client:idle => Da una menor prioridad a elementos. No es necesario que sean interactivos de inmediato.
• client:visible => Ideal para elementos no visibles en la página, es decir si nunca te desplazas hasta ellos, tampoco se cargará el código.
• client:media => Para elementos y para ciertos tamaños de pantalla específicos.
• client:only => Omite la representación HTML por completo y solo representa el código en el cliente.

<miComponente client:load />
<miComponente client:idle />
<miComponente client:visible />
<miComponente client:media="{max-width:50em;}" />
<miComponente client:only="solid.js" />

Integraciones

Las integraciones en Astro añaden nuevas funcionalidades y comportamientos al proyecto con solo unas pocas líneas de código.

Existen cientos de integraciones de herramientas o tecnologías, pudiendo ser oficiales o creadas por la comunidad para todo tipo de casos de uso. Como:

• Frameworks
• Adaptadores de Hosting
• SEO
• Analítica
• Sitemap
• TailwindCSS

Componentes

Los componentes de Astro son archivos con extensión .astro. Están diseñados para ser reutilizables, son extremadamente flexibles e incluso pueden contener un layout de página completo.

No se renderizan en el lado del cliente y puede contener Javascript dentro del Frontmatter del componente.

// Frontmatter de un componente.
---
// Scripts (JavaScript)
---
<!-- Component Template (HTML + JS Expressions) -->

El Script del componente se usa para ejecutar el Javascript que necesita representar el template o plantilla. En el se pueden hacer cosas como:

• Importar otros componentes de Astro.
• Importar otros componentes de otros frameworks, como React, Vue, Svelte…
• Importar datos, como un archivo JSON.
• Obtener contenido de una API o base de datos, en nuestro caso de la API REST de WordPress.
• Crear variables a las que hacer referencia en la plantilla.

Template del componente

La plantilla del componente define la salida HTML del componente.

• HTML Plano: Escribir HTML plano aquí hará que se renderice en cualquier página de Astro que use el componente.
• Sintaxis avanzada: La plantilla admite expresiones JavaScript, etiquetas <style>, scripts de Astro <script>, componentes importados y directivas especiales de Astro.
• Datos dinámicos: Los datos y valores definidos en el script del componente pueden usarse en la plantilla para generar HTML dinámico.

Transiciones Nativas

Las transiciones de visualización permiten controlar la navegación entre páginas en un sitio web, añadiendo transiciones y animaciones fluidas, gestionando el historial del navegador y evitando actualizaciones completas de la página para conservar elementos y estados mientras se actualiza el contenido.

Funciones de la API View Transitions de Astro

• Importar y añadir: Se debe importar y agregar el componente <ViewTransitions /> a un elemento header común.
• Detectores de eventos: Implementar detectores de eventos durante la navegación para activar scripts cuando sea necesario.
• Animaciones de transición: Añadir animaciones de transición de página usando directivas específicas.
• Optar por no usarlas: Permitir la exclusión del enrutamiento del lado del cliente para enlaces individuales.

¿Quieres tener o migrar tu web a un desarrollo Headless?

¡Yo te puedo ayudar! Me especializo en desarrollar sitios webs avanzados con WordPress y WooCommerce, programando soluciones personalizadas para proyectos web. ¿Trabajamos juntos?

Contáctame

Estructura de un proyecto y primeros pasos

Instalación de Astro

Para generar un proyecto con Astro de la forma mas rápida, hay que ejecutar algunos comandos desde la terminal.

# create a new project with npm
npm create astro@latest

La instalación nos guiará mediante un asistente hacia una configuración adecuada, incluso se podrá elegir una plantilla de inicio oficial para no empezar en un sitio vacío.

Una vez instalado el proyecto solo queda Iniciar Astro a través de un script preconfigurado.

npm run dev

A partir de aquí cada proyecto llevará un camino distinto.

* Es importante en este punto que tengas a mano la documentación de Astro para completar los próximos pasos. Ahora tienes infinitas posibilidades para extender el proyecto.

Puedes crear layouts, componentes, páginas, incorporar una base de datos, crear endpoints, colecciones de contenidos, añadir autenticación, añadir internacionalización (Multi idioma) etc etc.

Estructura

La estructura de carpetas de un proyecto con Astro podría tener la siguiente forma.

• src/*– El código fuente de tu proyecto (componentes, páginas, estilos, etc.)
• src/content– Directorio reservado a colecciones de contenido.
• src/layouts– Interfaz compartida por una o más páginas.
• public/*– Los assets sin código y sin procesar (fuentes, iconos, etc.)
• package.json– Un manifiesto del proyecto.
• astro.config.mjs– Un archivo de configuración de Astro. (recomendado)
• tsconfig.json– Un archivo de configuración de TypeScript. (recomendado)

¿Cuándo usar Astro y WordPress en clientes?

WordPress se puede usar como un headless para proporcionar contenido a un proyecto Astro.

Teniendo cuenta donde es bueno Astro y viendo todas las ventajas que tiene, a día de hoy la combinación Astro + WordPress es una opción a tener en cuenta. Existe una parte de la documentación de Astro con WordPress que te ayudará a empezar de la forma más rápida.

Necesitaremos extraer y manejar el contenido de la base de datos de WordPress, para lo que usaremos:

• REST API
• WPGraphQL
• Gato GraphQL

Es necesario tener separado una instalación de WordPress y un proyecto Astro. Esto hace que los proyectos sean mas difíciles de sufrir un ataque de fuerza bruta o hackeo.

Uno de los puntos mas importantes es el de pedir una autenticación del usuario y comprobar los permisos que tiene en WordPress.

La recuperación de los datos de WordPress se hacen a través de la URL REST API que nos devolverá un archivo JSON el cual tenemos que saber manipular para mostrar el contenido, iterarlo o modificarlo entre otras cosas.

Proyectos que puedo hacer con WordPress y Astro

• Landing Pages
• Tienda Online con WooCommerce
• Web Corporativa
• PWA
• Web de Eventos
• Revista o periódico online
• Portafolio
• Intranet o área de usuarios
• Web de cupones o descuentos
• e-learning
• CRM

Receta WordPress y Astro

Receta para mostrar contenido de capos personalizados de un custom post type de WordPress en un proyecto con Astro.

💥 Crea una instalación de WordPress.

💥 Crea un Custom Post Type (CPT) en mi caso «Tips»

💥 Añádele campos personalizados con Advanced Custom Field (ACF), en mi caso le he puesto un campo select para indicar el Nivel.

💥 * Importante, activa la opción de ACF Mostrar en la API REST que encontrarás en los ajustes del grupo de campos.

💥 Crea varios Tips desde WordPress, no te olvides de indicarle el nivel de cada uno.

💥 En este punto el Backend esta listo para recibir consultas.

💥 Crea un nuevo proyecto con Astro npm create astro@latest.

💥 Añade tu primer LAYOUT no te olvides de ponerle un <slot /> para inyectar ahí el contenido.

💥 En la página INDEX añade el siguiente código.

---
import Layout from '../layouts/Layout.astro'

const data = await fetch('https://israelescuer.com/wp-json/wp/v2/tip/?acf_format=standard')
const datos = await data.json()

// console.log(datos)
---

<Layout title="Bienvenido a Astro y WordPress">
	<h1>Astro y WordPress</h1>
	{datos.map(tip => (
        <h2>{tip.title.rendered}</h2>
		<p>{tip.acf.nivel_tip}</p>
    ))}
</Layout>

💥 Observa el código, hemos importado el LAYOUT creado para poder usarlo dentro del la página INDEX. Con la función FETCH de Javascript obtenemos el contenido del custom post type de WordPress a través de la API REST y se transforma a un JSON de Javascript.

💥 Dentro del LAYOUT usaremos la función de Javascript MAP para iterar todos los Tips y obtener el título y el nivel de cada uno, este nivel es el campo personalizado que hemos introducido.

💥 Para ver toda la información en la CONSOLA puedes añadir console.log(datos).

💥 A partir de aquí las posibilidades son infinitas manipulando todo el contenido de WordPress.

Te animo a crear proyectos y compartirlos, en este blog iré subiendo contenidos para hacer desarrollos más fáciles.

Acuérdate de ofrecer este servicio a tus clientes. ¡No tengas miedo!