El headless ecommerce es una arquitectura donde el frontend (lo que ve el usuario) está desacoplado del backend (lógica de negocio, catálogo, pedidos). En lugar de usar el tema monolítico de tu plataforma, el frontend se construye con frameworks modernos como React, Next.js o Vue, y se comunica con el backend vía API. Es una tendencia que gana fuerza, pero no es para todos.
¿Qué es headless ecommerce?
En una arquitectura tradicional (monolítica), el backend y el frontend están unidos: PrestaShop genera el HTML con Smarty/Twig, WooCommerce con PHP templates, Shopify con Liquid. En headless:
- El backend (plataforma ecommerce) gestiona catálogo, pedidos, pagos, envíos y expone APIs (REST o GraphQL).
- El frontend es una aplicación independiente (SPA, SSR, SSG) que consume esas APIs.
- La comunicación es exclusivamente vía API.
Ventajas reales
- Rendimiento: Frontends con SSG (Static Site Generation) cargan en milisegundos. Next.js con ISR permite páginas estáticas con datos dinámicos.
- Experiencia de usuario: Transiciones instantáneas, sin recargas de página, UX tipo app nativa.
- Omnicanalidad: Un único backend sirve web, app móvil, kioscos, digital signage, PWA.
- Flexibilidad de diseño: Sin limitaciones del sistema de temas de la plataforma. Diseño pixel-perfect.
- Stack moderno: Los desarrolladores frontend trabajan con React/Vue/Svelte, herramientas que conocen y les hacen más productivos.
Desventajas reales
- Complejidad: Más piezas que mantener. Frontend, backend, API gateway, caché, CDN, deploy pipelines.
- Coste de desarrollo: Un equipo frontend dedicado es necesario. No hay «instalar un tema y listo».
- Preview y edición: El equipo de marketing pierde la capacidad de editar la tienda visualmente sin desarrolladores.
- SEO: Requiere SSR o SSG correcto. Un SPA mal implementado puede ser invisible para Google.
- Time-to-market: Construir un frontend headless lleva semanas o meses. Un tema tradicional se configura en días.
¿Cuándo tiene sentido headless?
- Experiencia diferenciadora: Tu UX es tu ventaja competitiva y necesitas libertad total de diseño.
- Multi-canal real: Necesitas servir contenido en web, app nativa, PWA, y otros touchpoints desde un backend.
- Alto tráfico: Sitios con millones de visitas donde el rendimiento del frontend es crítico.
- Composable commerce: Quieres usar best-of-breed para cada componente (CMS, search, PIM, ecommerce).
- Equipo técnico potente: Tienes desarrolladores frontend experimentados disponibles para mantener el proyecto.
¿Cuándo NO tiene sentido?
- Tiendas estándar: Si un tema de PrestaShop, Shopify o WooCommerce cubre tus necesidades, headless es sobreingeniería.
- Equipo pequeño: Sin frontend developers dedicados, headless se convierte en cuello de botella.
- Presupuesto limitado: El desarrollo headless cuesta 2-5x más que un tema tradicional.
- Time-to-market urgente: Si necesitas lanzar rápido, un tema tradicional es más eficiente.
Opciones de stack headless
Shopify + Hydrogen
Shopify Hydrogen es el framework oficial de Shopify para headless. Basado en React + Remix, con Storefront API (GraphQL) y hosting en Oxygen.
PrestaShop 9 + Admin API + Next.js
PrestaShop 9 introduce API Platform. Combinado con un frontend Next.js, ofrece headless sobre una base open source sin costes de licencia.
WooCommerce + WPGraphQL + Next.js
WooCommerce con WPGraphQL expone el catálogo vía GraphQL. Proyectos como Next.js WooCommerce Starter aceleran el desarrollo.
Medusa.js (alternativa nativa headless)
Plataforma ecommerce headless open source, construida para APIs first. Ideal si no tienes legacy y quieres empezar de cero.
¿Necesitas evaluar si headless es para ti?
En Keliam desarrollamos tanto ecommerce tradicional como headless. Analizamos tu caso de uso y te recomendamos la arquitectura que mejor se adapte. Contacta con nosotros.
