CASO DE ESTUDIO / 13
Cafetería Astro
Un sitio de cafetería que combina la administración de WordPress con un frontend estático construido con Astro.
Cafetería Astro
ASTRO × WORDPRESS / HEADLESSEn esta página
01 / CONTEXTO
El problema y la solución
El punto de partida
Separar la presentación del sitio de la administración del contenido, manteniendo una experiencia editorial conocida y un frontend ligero.
La propuesta
WordPress actúa como CMS y expone su contenido mediante REST API; Astro lo consume para construir la web pública.
02 / PRODUCTO
Funciones principales
Contenido administrable
Textos, páginas e imágenes se gestionan desde el panel de WordPress sin editar el frontend.
Secciones del negocio
Composición con hero, menú, categorías, productos destacados e información de la cafetería.
Frontend estático
Páginas pre-renderizadas y poco JavaScript en cliente como prioridades de implementación.
Control de presentación
Componentes reutilizables y manejo de metadatos, títulos y estructura semántica desde Astro.
03 / IMPLEMENTACIÓN
Decisiones técnicas
WordPress sin tema tradicional
El CMS se utiliza como fuente de datos y panel editorial, no como responsable del renderizado público.
REST API como conexión
Astro obtiene y normaliza el contenido publicado en WordPress para componer las secciones del sitio.
Despliegues independientes
La separación de capas permite evolucionar el frontend sin sustituir el panel de administración de contenido.
04 / DOCUMENTACIÓN
Explorar en detalle
El recorrido completo por los módulos, las reglas y las pantallas del proyecto.
Leer documentación completa
Sitio web para una cafetería construido con arquitectura headless: Astro funciona como frontend estático y WordPress como CMS, exponiendo el contenido mediante REST API. El objetivo técnico fue separar presentación y administración de contenido para mantener una experiencia rápida, flexible y fácil de actualizar.
Arquitectura Headless
El proyecto usa WordPress únicamente como panel de administración y fuente de datos. Astro consume los endpoints de la REST API para renderizar páginas, secciones y contenido dinámico sin depender del tema tradicional de WordPress. Esta separación permite conservar la comodidad editorial de WordPress y obtener un frontend más ligero y controlado.
Frontend con Astro
Astro se encarga de la estructura visual, rutas, componentes y renderizado del sitio. La prioridad fue generar una interfaz rápida, con poco JavaScript en cliente y una composición simple de componentes reutilizables para secciones como hero, menú, categorías, productos destacados e información del negocio.
WordPress REST API
El contenido se obtiene desde WordPress mediante peticiones a su REST API. Esto permite administrar textos, páginas, entradas, imágenes y posibles productos o categorías desde el dashboard de WordPress, mientras Astro consume esos datos para construir la vista pública del sitio.
Modelado de Contenido
La estructura está pensada para que el contenido del negocio sea editable sin tocar código. WordPress puede gestionar colecciones como bebidas, alimentos, promociones, imágenes y páginas informativas. Desde Astro se normalizan esos datos para presentarlos como secciones limpias y consistentes.
Rendimiento y SEO
Al usar Astro como capa de presentación, el sitio puede entregar HTML pre-renderizado, reducir JavaScript innecesario y mejorar tiempos de carga. La arquitectura también facilita el control de metadatos, títulos, descripciones y estructura semántica para SEO.
Ventajas Técnicas
Esta implementación combina un CMS conocido para administración de contenido con un frontend moderno y desacoplado. El resultado es una base más mantenible que un tema WordPress tradicional: mejor control visual, despliegue independiente, menor carga en cliente y posibilidad de evolucionar el frontend sin cambiar el panel editorial.
Puedes ver el sitio en: astro-coffeeshop.vercel.app