¿Qué es el comercio headless?
En una plataforma eCommerce tradicional («monolítica»), el mismo sistema guarda los productos, gestiona carritos y pedidos y genera las páginas que ve el cliente, normalmente mediante un tema. El comercio headless separa esas dos funciones: el motor de comercio expone productos, precios, carritos, checkout y clientes mediante APIs, y un frontend independiente (la «cabeza») consume esas APIs para construir la tienda.
Como el frontend es independiente, puede desarrollarse con cualquier framework web, desplegarse por separado y reutilizarse en varios canales (web, app móvil, pantallas en tienda, feeds para marketplaces) con el mismo backend de comercio.
Una arquitectura headless típica
| Capa | Función | Ejemplos |
|---|---|---|
| Frontend | Genera las páginas, el enrutado, las etiquetas SEO y la interfaz | Next.js, Nuxt, Remix, Astro, Shopify Hydrogen |
| Motor de comercio | Catálogo, precios, carrito, checkout, pedidos, clientes | Shopify (Storefront API), BigCommerce, commercetools, Adobe Commerce (GraphQL), Medusa, Saleor, Vendure |
| Gestión de contenidos | Páginas editoriales, landings, banners | Contentful, Sanity, Storyblok, Strapi |
| Búsqueda y merchandising | Búsqueda rápida, filtros, ordenación | Algolia, Elasticsearch/OpenSearch, Typesense |
| Otros servicios | Pagos, PIM, reseñas, impuestos, ERP | Stripe, Adyen, Akeneo, conectores ERP |
El frontend suele renderizar las páginas en el servidor o al compilar (SSR o generación estática) para que las fichas y categorías carguen rápido y se indexen por completo, y después activa en el navegador las partes interactivas como el selector de variantes o el carrito.
Headless, composable y MACH
- Headless solo significa que el frontend está desacoplado del backend.
- Comercio composable va más allá: en lugar de una plataforma, se combinan servicios especializados (motor de comercio, CMS, búsqueda, PIM, pagos).
- MACH significa Microservicios, API-first, Cloud-native y Headless, principios promovidos por la asociación MACH Alliance.
Puedes usar un frontend headless sobre una plataforma convencional como Shopify o Adobe Commerce sin llegar a una arquitectura totalmente composable, y suele ser el primer paso más pragmático.
Ventajas
- Libertad en el frontend: control total del diseño y la UX, sin las limitaciones de las plantillas del tema.
- Potencial de rendimiento: frameworks modernos, renderizado en el edge y caché granular pueden dar páginas muy rápidas, si el equipo lo trabaja.
- Omnicanalidad: una sola API de comercio sirve a web, apps, quioscos y socios.
- Despliegues independientes del frontend y del backend.
- Componentes sustituibles: cambiar la búsqueda o el CMS sin migrar todo.
Inconvenientes y costes ocultos
- Más desarrollo: lo que un tema da hecho (área de cliente, resultados de búsqueda, filtros, etiquetas SEO, sitemaps, previsualización para editores) hay que construirlo y mantenerlo.
- Más proveedores y contratos que pagar, supervisar e integrar.
- Apps y plugins que no funcionan: muchas apps de plataforma inyectan código en el tema y no son compatibles con frontends headless.
- Necesitas un equipo técnico que domine el framework, las APIs, la caché y el despliegue, también después del lanzamiento.
- El rendimiento no es automático: un frontend con mucho JavaScript en el cliente puede ser más lento que un buen tema.
Cuándo tiene sentido
- Vendes en varios frontends (web, app, tienda física, portal B2B) que deben compartir el mismo backend.
- Tus necesidades de contenido superan lo que permite el editor del tema.
- Tienes, o vas a financiar, un equipo de desarrollo propio o externo de forma continuada.
- Tienes requisitos de rendimiento, internacionalización o UX que la capa de tema bloquea.
Para una tienda nueva o pequeña con un catálogo estándar, un buen tema en una plataforma alojada se lanza antes y cuesta menos de mantener. Compara opciones en nuestra comparativa de plataformas y calcula los costes con la calculadora.
¿Te planteas el headless? Nuestro equipo de desarrollo eCommerce a medida puede evaluar si encaja antes de que te comprometas.