El desarrollo web moderno tiende hacia la arquitectura Headless. En este tutorial, aprenderemos a combinar la potencia de edición de WordPress con la velocidad inigualable de Astro para crear un blog estático que vuela.
Muchos clientes adoran la interfaz de administración de WordPress pero odian la lentitud y las vulnerabilidades de seguridad que a menudo conlleva. Astro llega para solucionar esto, permitiéndonos generar HTML estático en el momento de la compilación.
1. Configurando WordPress
Lo primero que necesitamos es asegurarnos de que WordPress exponga los datos correctamente. Por defecto, la REST API ya viene activada, pero para este proyecto usaremos ACF (Advanced Custom Fields) para añadir campos extra a nuestros posts.
"La separación de preocupaciones (SoC) entre el backend y el frontend no es solo una moda, es una necesidad para la escalabilidad."
2. Fetching de datos en Astro
Astro hace que el fetching de datos sea increíblemente sencillo
gracias a su soporte de top-level await. Aquí tienes un
ejemplo de cómo obtener los posts:
Generando Rutas Dinámicas
Para generar las páginas individuales (como la que estás leyendo
ahora), usamos la función getStaticPaths() de Astro. Esto
le dice al compilador cuántas páginas HTML debe generar basándose en
los datos de la API.
- Consultar todos los posts de la API.
- Mapear cada post a un parámetro
slug. -
Pasar los datos del post como
propsa la página.
Conclusión
Esta combinación es ganadora. Obtienes un Lighthouse Score de 100 casi sin esfuerzo, seguridad de grado militar (ya que WP no está expuesto al público directamente) y la experiencia de edición que tus clientes ya conocen.
En el próximo artículo veremos cómo manejar la paginación y las categorías. ¡Suscríbete para no perdértelo!