En el ecosistema Shopify hay una guerra religiosa. Por un lado, los Liquid Purists. Argumentan que Liquid es sólido, gratuito y está alojado en Shopify. ¿Por qué complicarlo? Del otro lado, los Arquitectos sin cabeza. Argumentan que Liquid es una reliquia de 2010, restringida por la plataforma e incapaz de experiencias modernas.

Ambos tienen razón. Ambos están equivocados. La elección no se trata de tecnología. Se trata de Economía. Este artículo desglosa el costo total de propiedad (TCO) exacto de pasar al hidrógeno y por qué las marcas que generan más de €20 millones de GMV rara vez permanecen en Liquid.

Por qué Maison Code habla de esto

En Maison Code Paris, actuamos como la conciencia arquitectónica de nuestros clientes. A menudo heredamos stacks “modernos” construidos sin una comprensión fundamental de la escala.

Discutimos este tema porque representa un punto de inflexión crítico en la madurez de la ingeniería. Implementarlo correctamente diferencia un MVP frágil de una plataforma resistente de nivel empresarial.

El techo líquido

Liquid es un lenguaje de plantillas increíble. Representa el lado del servidor, es rápido y tiene acceso directo al objeto “tienda”. Pero a escala toca un techo duro.

1. Los espaguetis de las “Apps”

En un tema Liquid, cada característica es una “Aplicación”.

¿Necesitas una lista de deseos? Instale una aplicación (€9/mes).
¿Necesitas revisiones? Instale una aplicación (€99/mes).
¿Necesita un creador de paquetes? Instale una aplicación (€49/mes).

Cada aplicación inyecta:

JavaScript único: generalmente jQuery o Vanilla JS que entran en conflicto con otros.
CSS único: Anulando tus estilos con !important.
Solicitudes de red: He auditado tiendas con 82 scripts separados cargando en window.load.

El resultado: una puntuación Lighthouse de 24. No puedes optimizarlo. El código está alojado en el servidor del desarrollador de la aplicación. Usted es rehén del mínimo común denominador de la calidad del código. (Compare esto con Diseño atómico).

2. La experiencia del desarrollador (DX) vacía

El líquido no tiene ningún tipo de seguridad. Liquid no tiene modelo de componente (los fragmentos no son componentes). El líquido no tiene pruebas unitarias. Si elimina un fragmento al que se hace referencia en theme.liquid, el sitio se rompe. Los equipos de ingeniería profesionales no pueden trabajar eficazmente en Liquid. Se siente como editar documentos de MS Word en comparación con la precisión de React/TypeScript.

La inversión en hidrógeno

Hydrogen es el marco basado en React de Shopify construido en Remix. Utiliza React Server Components (RSC) para combinar la velocidad del servidor con la interactividad del cliente. Pero es caro.

El costo de la construcción

Tienda de líquidos: €50 mil - €100 mil Construcción de agencia.
Tienda de hidrógeno: €200 mil - €500 mil construcción de agencia.

El costo de mantenimiento

Líquido: 1 desarrollador junior (€60 mil/año).
Hidrógeno: 2 ingenieros senior de React (€300 mil/año).

Entonces, ¿por qué hacerlo?

El retorno de la inversión sin cabeza

No compras un Ferrari para repartir pizza. Lo compras para ganar carreras. El hidrógeno se amortiza en tres vectores específicos.

Vector 1: Rendimiento = Conversión

Migramos una marca de moda de 50 millones de dólares de Liquid a Hydrogen.

LCP (pintura con contenido más grande): 2,4 s -> 0,8 s (consulte Estándares de rendimiento web).
CLS (cambio de diseño acumulativo): 0,15 -> 0,00.
Tasa de conversión: +18%.

Las matemáticas: 50 millones de dólares * 18 % = 9 millones de dólares de ingresos adicionales. Costo de ingeniería = €300k. ROI = 2900%.

Vector 2: La UX “imposible”

El líquido no puede hacer:

Combinación de inventario de varias tiendas (fusionando almacenes de EE. UU. y California en una sola vista).
Configurador 3D con actualizaciones de precios en tiempo real que involucran una lógica compleja.
Transiciones instantáneas “estilo Netflix” entre páginas (navegación SPA).

Con Hydrogen, simplemente estás escribiendo React. Si puedes imaginarlo, puedes construirlo. “Bundle Builder” no es una aplicación de €49. Es un componente de React que usted posee, optimiza y prueba.

// El hidrógeno facilita la obtención de datos complejos y con seguridad de tipos
exportar cargador de funciones asíncronas ({context, params}: LoaderFunctionArgs) {
  const {escaparate} = contexto;
  const {producto} = espera storefront.query(PRODUCT_QUERY, {
    variables: {identificador: params.handle},
  });

  if (!product) lanza una nueva respuesta ('No encontrado', {estado: 404});

  // Lógica única: obtener inventario en tiempo real desde una instancia de Redis separada
  inventario constante = esperar redis.get(`stock:${product.id}`);

  return json({producto, inventario});
}

función PáginaProducto() {
  const {producto, inventario} = useLoaderData<tipo de cargador>();
  
  regresar (
    <div className="producto-cuadrícula">
      <Opciones de VariantSelector={producto.opciones} />
      <Botón Agregar al carrito 
        disponible={inventario > 0} 
        onClick={() => trackEvent('add_to_cart')} 
      />
    </div>
  );
}

Vector 3: Independencia del proveedor

En Liquid, estás casado con la App Store. En Hidrógeno, estás casado con la API. *¿No te gusta Yotpo? Cambie la llamada API a Okendo. La interfaz de usuario no implica nada.

¿No te gusta Algolia? Cambie a Typesense. Eres dueño del vaso.

Diagrama arquitectónico: la separación de preocupaciones

La diferencia clave es la capa “BFF” (Backend for Frontend).

gráfico TD
    Usuario[Navegador de usuario] <-->|Carga útil RSC| Borde[Red de borde de oxígeno]
    
    subgrafo "La Aplicación (Hidrógeno)"
        Borde -->|Cargar| Reaccionar[Componentes del servidor React]
        Reaccionar -->|Caché| KV[Caché KV de oxígeno]
    fin
    
    subgrafo "La capa de datos"
        Reaccionar -->|Consulta| Escaparate[API de escaparate de Shopify]
        Reaccionar -->|Consulta| CMS[Sanidad CMS]
        Reaccionar -->|Consulta| PIM[Akeneo PIM]
    fin

9. Alojamiento: Oxígeno vs Vercel

¿Dónde se ejecuta el hidrógeno? Opción A: Shopify Oxígeno.

Incluido en Shopify Plus.
Cero tarifas de salida.
Estrecha integración con Shopify Storefront API (velocidad de red privada).
Contras: Red de nodos más pequeña que Vercel.

Opción B: Vercel.

Red perimetral más rápida.
Mejor DX (implementaciones preliminares).
Contras: Caro para un gran ancho de banda.

Veredicto: Comience con oxígeno. Es “Gratis” (incluido en Plus). Pase a Vercel si necesita una lógica de Edge Middleware específica que Oxygen aún no admite.

10. La estrategia migratoria (patrón estrangulador)

No reescribas todo el sitio a la vez. Utilice el Patrón de higo estrangulador.

Implemente Hydrogen en shop.brand.com.
Enrute el tráfico de /products/* hacia Hidrógeno.
Mantenga el hogar y las colecciones en líquido (www.brand.com).
Migre lentamente un tipo de página a la vez.
Finalmente, cambie DNS a Hidrógeno. Esto elimina el riesgo del lanzamiento. Mide la conversión en la nueva página del producto antes de comprometerse con la reconstrucción completa.

12. La brecha de talento (realidad de la contratación)

Contratar un Liquid Dev es fácil (€60k). Hay millones. Contratar un desarrollador de hidrógeno es difícil. Necesita un “Ingeniero de React con contexto de comercio electrónico”. Cobran más de 150.000 dólares. Sin embargo, la carrera del desarrollador especializado de Liquid es un “callejón sin salida”. El desarrollador de React aporta las mejores prácticas del ecosistema tecnológico más amplio (Pruebas, TypeScript, CI/CD). Estás pagando por Ingeniería de software, no sólo por “Ajustes de tema”. Esto eleva la calidad de toda su presencia digital.

13. Estrategias de almacenamiento en caché de componentes del servidor

RSC es rápido, pero las llamadas a la base de datos son lentas. El hidrógeno incluye Caché de oxígeno. Implementamos patrones “obsoletos mientras se revalidan”. const producto = await cache.get('producto', estrategia: swr(60)). Esto entrega el producto obsoleto instantáneamente (0 ms) y luego lo actualiza en segundo plano. También utilizamos Almacenamiento en caché de subsolicitud. Guardamos en caché el “Menú” durante 1 hora, pero el “Precio” durante 1 segundo. Este control granular es imposible en Liquid (que almacena en caché toda la página o nada).

14. Conclusión

Si está ganando <€5 millones de GMV, permanezca en Liquid. La sobrecarga de administrar una aplicación React, configurar CI/CD, manejar errores de hidratación y administrar la invalidación de caché es enorme. El líquido funciona con pilas. Simplemente funciona. El hidrógeno es un “reactor nuclear”. Potencia infinita, pero si no gestionas las barras de refrigeración, se derrite.

La lista de verificación

¿Tiene un ingeniero de React interno? (Requerido)
¿Su LCP actualmente es > 2,5 s?
¿Estás gastando > €2k/mes en aplicaciones de Shopify solo para ajustes en la interfaz de usuario?
¿Su GMV es > €10 millones?

Si respondiste SÍ a todas, bienvenido a Hydrogen.

Conclusión

El líquido es para Comerciantes. El hidrógeno es para Marcas. Un comerciante vende productos. Una marca vende una experiencia. Cuando la experiencia se convierte en el diferenciador, la fricción de Liquid se vuelve más cara que el salario del ingeniero de React.

Contrate a nuestros arquitectos.