¿Qué es headless commerce y por qué importa?
Headless commerce separa el frontend (lo que ve el usuario) del backend (donde vive la lógica de negocio). Shopify funciona como motor de comercio a través de su Storefront API, mientras que el storefront se construye con un framework moderno como Hydrogen o Next.js.
El resultado: tiendas ultra-rápidas con experiencias completamente personalizadas, sin las limitaciones de los temas tradicionales de Shopify.
Hydrogen: el framework oficial de Shopify
Hydrogen es el framework de Shopify basado en React y Remix. Está diseñado específicamente para ecommerce y viene con componentes optimizados para Shopify (carritos, productos, colecciones).
Ventajas de Hydrogen
- Integración nativa — hooks y componentes pre-construidos para la Storefront API
- Oxygen hosting — deploy en la CDN de Shopify con edge rendering
- Optimizado para ecommerce — SEO, analytics y performance out-of-the-box
- Soporte oficial — Shopify mantiene y evoluciona el framework
Limitaciones de Hydrogen
- Ecosistema más pequeño que Next.js
- Menos flexibilidad para features no-ecommerce (blog, CMS, landing pages)
- Lock-in parcial con Oxygen para hosting
- Curva de aprendizaje de Remix si tu equipo viene de Next.js
Next.js: el estándar de la industria
Next.js es el framework React más popular del mundo, mantenido por Vercel. No está hecho específicamente para ecommerce, pero su flexibilidad lo convierte en la opción preferida para proyectos complejos.
Ventajas de Next.js
- Ecosistema masivo — miles de librerías, componentes y recursos
- Máxima flexibilidad — blog, CMS, áreas de usuario, cualquier feature
- ISR y SSG — páginas estáticas con revalidación para performance extrema
- Vercel + cualquier hosting — no hay lock-in
- Talento disponible — más fácil encontrar desarrolladores Next.js que Hydrogen
Limitaciones de Next.js
- Hay que construir toda la integración con Shopify manualmente
- No hay componentes pre-construidos para carrito, checkout, etc.
- Más código boilerplate para features básicas de ecommerce
Comparativa técnica
| Criterio | Hydrogen | Next.js |
|---|---|---|
| Base | React + Remix | React + Next.js |
| Rendering | SSR (Oxygen Edge) | SSR, SSG, ISR, RSC |
| Storefront API | Integración nativa | Manual (graphql-request) |
| Performance | Excelente | Excelente |
| Hosting | Oxygen (recomendado) | Vercel, AWS, cualquiera |
| Ecosistema | Creciendo | Maduro |
| Flexibilidad | Ecommerce-first | General-purpose |
| Curva de aprendizaje | Media (Remix) | Media-baja |
¿Cuándo elegir cada uno?
Elegí Hydrogen si:
- Tu proyecto es 100% ecommerce
- Querés el camino más rápido a producción
- Tu equipo ya conoce Remix
- Querés hosting en Oxygen sin configurar infraestructura
Elegí Next.js si:
- Tu proyecto combina ecommerce con contenido editorial, áreas de usuario o features complejas
- Necesitas máxima flexibilidad y control
- Tu equipo ya trabaja con Next.js
- Querés deploy en Vercel o tu propia infraestructura
Nuestra recomendación para marcas en Latinoamérica
Para la mayoría de las marcas DTC en Latinoamérica, Next.js es la opción más segura. Su ecosistema maduro, la disponibilidad de talento y la flexibilidad para agregar features no-ecommerce lo hacen ideal para proyectos que van más allá de una tienda simple.
Hydrogen es excelente para tiendas pure-play que quieren el camino más directo a un storefront headless performante sin preocuparse por infraestructura.
¿Necesitas ayuda para decidir? Hacemos un análisis técnico de tu proyecto y te recomendamos la arquitectura óptima para tu caso de uso específico.
