Milano Calçados
Moda y calzado · 2024 · 5 meses
Migración de VTEX CMS a VTEX IO: una tienda más rápida y lista para el headless, en una red de 33 tiendas en 5 estados.
Storefronts de alto rendimiento, hechos para convertir.
Frontend desacoplado, SEO técnico y una UX a la altura de las mejores tiendas, con VTEX FastStore, Shopify Hydrogen, Salesforce Composable Storefront y Next.js sobre cualquier engine API-first.
Headless separa la tienda del motor de commerce. El equipo de front trabaja con un stack moderno, la plataforma sigue a cargo del catálogo, el pedido y el pago, y cada capa evoluciona a su propio ritmo.
Las capas de un stack headless
Front en el edge, una capa de APIs con contrato estable y el commerce engine como cerebro del pedido. Cada capa tiene una responsabilidad clara y evoluciona por sí sola.
Web y PWANavegador y app instalable
Infra edgeCDN, SSG/ISR y caché
Storefront (head)Next.js, Remix o Hydrogen
App y POSMismas APIs, otra cabeza
CMS headlessContenido y landing pages
Capa de APIsREST y GraphQL versionados
Commerce engineCatálogo, pedido, inventario
ERP y fiscalIntegraciones sin cambios
WMS y TMSAlmacén y transporte
- Web y PWANavegador y app instalable
- Infra edgeCDN, SSG/ISR y caché
- Storefront (head)Next.js, Remix o Hydrogen
- CMS headlessContenido y landing pages
- App y POSMismas APIs, otra cabeza
- Capa de APIsREST y GraphQL versionados
- Commerce engineCatálogo, pedido, inventario
- ERP y fiscalIntegraciones sin cambios
- WMS y TMSAlmacén y transporte
Arquitectura de referencia. El framework y el CMS cambian según la plataforma de commerce y el stack que la empresa ya usa.
Qué entregamos en headless
Cuatro frentes a cargo del mismo squad, del storefront a la operación después del go-live.
Storefront headless
Frontend desacoplado, con un stack moderno, que funciona en el edge y consume las APIs de la plataforma.
- Storefronts en Next.js, Remix, Astro e Hydrogen.
- VTEX FastStore, Shopify Hydrogen y Salesforce Composable Storefront.
- Personalización visual sin las ataduras de un tema.
- Deploys independientes en Vercel, Netlify o Cloudflare.
SEO técnico y rendimiento
HTML prerrenderizado, metadata dinámica y datos estructurados en todas las páginas.
- SSG e ISR para miles de páginas de producto y categoría.
- Imágenes en AVIF y WebP con carga diferida.
- schema.org y datos estructurados en los resultados de búsqueda.
- Core Web Vitals medidos con usuarios reales, no solo en laboratorio.
PWA y multicanal
La misma capa de APIs atiende web, app, PWA y punto de venta.
- PWA offline-first con instalación nativa.
- App móvil y POS sobre las mismas APIs del commerce.
- CMS headless en lugar del editor visual nativo.
- Integraciones con ERP, WMS, TMS y sistemas fiscales preservadas.
Operación continua
Después del go-live, el storefront se convierte en producto, con un squad dedicado y evolución en cada sprint.
- Discovery, pruebas A/B y optimización del embudo.
- Personalización, recomendación e IA aplicadas a la tienda.
- Monitoreo continuo y respuesta a incidentes.
- Nuevos componentes entregados en cada sprint.
El framework adecuado para tu contexto
La elección depende de la plataforma de commerce, de la madurez del equipo de front y del tipo de catálogo, no de la preferencia por un stack.
VTEX FastStoreStack composable oficial de VTEX, en Next.js y GraphQL, con SSG e ISR e integración nativa con las APIs de VTEX.
Shopify HydrogenFramework basado en Remix con hosting en Oxygen, para marcas Shopify Plus que quieren un storefront propio.
Salesforce Composable StorefrontArquitectura de referencia oficial de Salesforce Commerce Cloud, el antiguo PWA Kit, en React con SCAPI.
Next.js CommerceTemplate open source de Vercel para commerce. Flexible, funciona sobre cualquier engine headless.
RemixFramework full-stack enfocado en los fundamentos de la web, con una buena experiencia de desarrollo y mejora progresiva.
AstroArquitectura de islas, con el mínimo de JavaScript en el cliente. Indicado para contenido y commerce ligero.
Full-stack o headless: qué cambia
Seis dimensiones para comparar el storefront nativo de la plataforma con un front desacoplado.
Rendimiento
En full-stack, la velocidad depende del tema y de las apps instaladas. En headless, HTML prerrenderizado y caché en el edge.
Personalización visual
Limitada al tema de la plataforma en full-stack; libre en headless, componente a componente.
SEO técnico
Depende del tema en full-stack. En headless, la metadata, los datos estructurados y el renderizado quedan bajo control del equipo.
Curva de aprendizaje
Baja en full-stack. Media a alta en headless, que exige dominar SSR, ISR, caché en el edge y streaming.
Multicanal
Restringido en full-stack. Nativo en headless, con la misma capa de APIs para web, app y punto de venta.
Deploy independiente
En full-stack, front y back se publican juntos. En headless, cada capa tiene su propio ciclo de deploy.
Dónde ya funciona el headless
Un caso público y escenarios entregados por CCX, descritos sin identificar a los clientes.
Leer caso
Moda multimarca
Escenario entregado · VTEX FastStore
Un grupo de moda con tres marcas migró de un CMS monolítico a FastStore.
Retail alimentario
Escenario entregado · PWA con checkout VTEX
Una cadena regional implementó una PWA headless con checkout VTEX: app instalable y modo offline para regiones con poca conectividad.
Del diagnóstico al storefront en producción
- 1
Diagnóstico técnico
En hasta dos sesiones, sin costo: arquitectura, framework, roadmap y estimación de mejora en Core Web Vitals.
- 2
MVP
Home, listado y página de producto en línea en 8 a 10 semanas.
- 3
Alcance completo
Catálogo complejo, varias marcas, B2B e integraciones pesadas, en 3 a 6 meses o más.
- 4
Operación continua
Squad dedicado, pruebas A/B, optimización del embudo y monitoreo continuo.
Preguntas frecuentes sobre headless commerce
¿Qué es headless commerce?
Es un modelo de arquitectura en el que el frontend, el storefront, está totalmente desacoplado del backend de commerce. El storefront consume APIs para mostrar catálogo, carrito, búsqueda y checkout, lo que permite usar tecnologías modernas, como Next.js, React o Vue, sin depender de las pantallas nativas de la plataforma.
¿Qué ventaja tiene adoptar headless?
Mejor rendimiento en Core Web Vitals, libertad visual, la misma capa de APIs para web, app, PWA y punto de venta, ciclos de deploy independientes del backend y margen para probar y optimizar la experiencia sin tocar el núcleo del commerce.
¿Headless es lo mismo que composable commerce?
No. Headless separa frontend y backend; composable va más allá y divide el backend en varios servicios. Una tienda puede ser headless con backend monolítico (VTEX tradicional con Next.js) o headless y composable (FastStore con Algolia, Contentful y Stripe). Consulta la página de composable commerce.
¿VTEX FastStore es headless?
Sí. FastStore es el framework headless y composable oficial de VTEX, basado en Next.js, optimizado para Core Web Vitals, con SSG e ISR nativos e integración directa con las APIs de VTEX. Es la evolución natural para las marcas VTEX que buscan alto rendimiento.
¿Puedo usar Shopify Hydrogen en Brasil?
Sí. Hydrogen es el framework headless oficial de Shopify, basado en Remix, y funciona con Shopify Plus en Brasil. CCX ya implementa Hydrogen en tiendas brasileñas integradas con medios de pago locales, NF-e y ERPs.
¿Cuánto dura un proyecto headless?
Los proyectos típicos llevan de 3 a 6 meses. Los MVPs centrados en home, listado y página de producto pueden salir en 8 a 10 semanas. Los alcances completos, con catálogo complejo, varias marcas, B2B o integraciones pesadas, suelen superar los 6 meses.
¿El SEO no empeora en un storefront headless?
Al contrario: bien implementado, el SEO mejora. Next.js y FastStore usan SSG e ISR para entregar HTML prerrenderizado, con metadata enriquecida, datos estructurados y Core Web Vitals en verde.
¿Tengo que rehacer el ERP o SAP para migrar?
No. El headless afecta al storefront y a la capa de commerce. Las integraciones con ERP, WMS, TMS y sistemas fiscales siguen como están; cambiamos la capa visual y, a veces, parte de la orquestación de pedidos.
Guía de headless commerce
Por qué el headless se volvió estándar, cuánto cuesta de verdad y cómo operar el storefront después del go-live.
Por qué el headless se volvió estándar en el commerce moderno
Hace diez años, usar el storefront listo de la plataforma era una ventaja: menos código, menos costo y un lanzamiento más rápido. Con los Core Web Vitals pesando en el ranking de Google, la mayor parte del tráfico en el móvil y una competencia visual cada vez más sofisticada, la ecuación cambió.
Los storefronts nativos rara vez cargan rápido sin mucha personalización, y personalizar un monolito es caro, lento y frágil. En headless, el equipo de front trabaja con un stack moderno (Next.js, Remix, Hydrogen) y el commerce engine sigue haciendo lo que hace bien: catálogo, pedido y pago.
Los trade-offs reales de adoptar headless
Headless no sale gratis. El equipo necesita dominar el front moderno, con SSR, SSG, ISR, caché en el edge y streaming, gobernar contratos de API y gestionar el versionado. El costo inicial sube, y los recursos listos de la plataforma, como el editor visual y la vista previa nativa, dan paso a un CMS headless.
CCX evalúa con honestidad si la empresa tiene la madurez para obtener el retorno. Cuando la tiene, la mejora en rendimiento, SEO y agilidad es grande. Cuando no, un storefront nativo optimizado puede ser el camino más prudente.
SEO y rendimiento en primer lugar
Next.js y FastStore generan miles de páginas de producto y categoría con HTML listo en el servidor, mediante SSG e ISR. Las imágenes se sirven en AVIF o WebP con carga diferida, la metadata es dinámica y los datos estructurados de schema.org aparecen en los resultados de búsqueda.
CCX implementa el monitoreo de usuarios reales, con Vercel Speed Insights o Datadog, para seguir el comportamiento real de la tienda, no solo el del laboratorio.
Operación continua y evolución del producto
Migrar a headless no termina en el go-live. El storefront se convierte en un producto continuo, con squad dedicado, ciclos de discovery, pruebas A/B, optimización del embudo y nuevos componentes en cada sprint.
CCX ofrece modelos de operación posteriores al go-live que cubren la evolución y la respuesta a incidentes. PWA, modo offline, experimentos, personalización, recomendación e IA son más fáciles de implantar en este stack.
Diseña tu storefront headless con CCX.
Treinta minutos con un ingeniero de CCX, sin costo, para revisar la arquitectura actual y salir con framework, roadmap de entrega y estimación de mejora en Core Web Vitals.