Nell’ecosistema Shopify c’è una guerra religiosa. Da un lato i Puristi dei Liquidi. Sostengono che Liquid è robusto, gratuito e ospitato da Shopify. Perché complicarlo? Dall’altro lato, gli Architetti Senza Testa. Sostengono che Liquid sia una reliquia del 2010, limitato dalla piattaforma e incapace di esperienze moderne.

Entrambi hanno ragione. Entrambi hanno torto. La scelta non riguarda la tecnologia. Si tratta di Economia. Questo articolo analizza l’esatto costo totale di proprietà (TCO) del passaggio all’idrogeno e il motivo per cui i marchi che generano oltre 20 milioni di dollari GMV raramente rimangono su Liquid.

Perché Maison Code ne parla

In Maison Code Paris, agiamo come la coscienza architettonica dei nostri clienti. Spesso ereditiamo stack “moderni” costruiti senza una comprensione fondamentale della scala.

Discutiamo di questo argomento perché rappresenta un punto di svolta critico nella maturità ingegneristica. Implementarlo correttamente differenzia un MVP fragile da una piattaforma resiliente di livello aziendale.

Il soffitto liquido

Liquid è un linguaggio di template straordinario. Esegue il rendering lato server, è veloce e ha accesso diretto all’oggetto store. Ma su larga scala raggiunge un limite massimo.

1. Gli spaghetti delle “App”.

In un tema Liquid, ogni funzionalità è una “App”.

Hai bisogno di una lista dei desideri? Installa un’app (€ 9 / mese).
Hai bisogno di recensioni? Installa un’app (€ 99 / mese).
Hai bisogno di un generatore di pacchetti? Installa un’app (€ 49 / mese).

Ogni app inietta:

JavaScript unico: solitamente jQuery o vanilla JS che è in conflitto con altri.
CSS univoco: sovrascrive i tuoi stili con !important.
Richieste di rete: ho controllato negozi con 82 script separati caricati su window.load.

Il risultato: un punteggio Lighthouse di 24. Non puoi ottimizzarlo. Il codice è ospitato sul server dello sviluppatore dell’app. Sei tenuto in ostaggio dal minimo comune denominatore della qualità del codice. (Confronta questo con Atomic Design).

2. Il vuoto dell’esperienza dello sviluppatore (DX).

Il liquido non ha sicurezza del tipo. Liquid non ha un modello di componente (gli snippet non sono componenti). Liquid non ha test unitari. Se elimini uno snippet a cui si fa riferimento in “theme.liquid”, il sito si interrompe. I team di ingegneri professionisti non possono lavorare in modo efficace in Liquid. Sembra di modificare documenti MS Word rispetto alla precisione di React/TypeScript.

L’investimento nell’idrogeno

Hydrogen è il framework basato su React di Shopify basato su Remix. Utilizza React Server Components (RSC) per combinare la velocità del server con l’interattività del client. Ma è costoso.

Il costo della costruzione

Negozio di liquidi: creazione di agenzia da € 50.000 - € 100.000.
Negozio di idrogeno: creazione di un’agenzia da € 200.000 - € 500.000.

Il costo della manutenzione

Liquido: 1 Junior Dev (€ 60.000/anno).
Idrogeno: 2 Senior React Engineers (€ 300.000/anno).

Allora perché farlo?

Il ROI di Headless

Non compri una Ferrari per consegnare la pizza. Lo compri per vincere le gare. L’idrogeno si ripaga in tre vettori specifici.

Vettore 1: Performance = Conversione

Abbiamo migrato un marchio di moda da 50 milioni di dollari da Liquid a Hydrogen.

LCP (Largest Contentful Paint): 2,4s -> 0,8s (vedi Standard delle prestazioni web).
CLS (cambio layout cumulativo): 0,15 -> 0,00.
Tasso di conversione: +18%.

La matematica: € 50 milioni * 18% = € 9 milioni di entrate aggiuntive. Costo dell’ingegneria = € 300.000. ROI = 2.900%.

Vettore 2: la UX “impossibile”.

Il liquido non può fare:

Combinazione di inventario multi-negozio (unione dei magazzini statunitensi e canadesi in un’unica visualizzazione).
Configuratore 3D con aggiornamenti dei prezzi in tempo reale che coinvolgono logiche complesse.
Transizioni istantanee “in stile Netflix” tra le pagine (navigazione SPA).

Con Hydrogen stai semplicemente scrivendo React. Se puoi immaginarlo, puoi costruirlo. Il “Bundle Builder” non è un’app da € 49. È un componente React che possiedi, ottimizzi e testi.

“tsx // L’idrogeno facilita il recupero di dati complessi e sicuri per i tipi esporta funzione asincrona caricatore({context, params}: LoaderFunctionArgs) { const {vetrina} = contesto; const {prodotto} = attendono storefront.query(PRODUCT_QUERY, { variabili: {handle: params.handle}, });

if (!prodotto) lancia una nuova risposta(‘Non trovato’, {status: 404});

// Logica univoca: recupera l’inventario in tempo reale da un’istanza Redis separata const inventario = attendono redis.get(stock:€{product.id});

return json({prodotto, inventario}); }

funzione PaginaProdotto() { const {prodotto, inventario} = useLoaderData();

ritorno (

0} onClick={() => trackEvent(‘add_to_cart’)} />

); }


### Vettore 3: Indipendenza del fornitore
In Liquid sei sposato con l'App Store.
In Hydrogen sei sposato con l'API.
* Non ti piace Yotpo? Scambia la chiamata API a Okendo. L'interfaccia utente non implica nulla.
* Non ti piace l'Algolia? Passa a Typesense.
Possiedi il vetro.

## Diagramma architettonico: la separazione degli interessi
La differenza fondamentale è il livello "BFF" (Backend for Frontend).

"sirena".
grafico TD
    Utente[Browser utente] <-->|Payload RSC| Edge[Rete Edge di ossigeno]
    
    sottoparagrafo "L'applicazione (idrogeno)"
        Bordo -->|Carica| React[Componenti del server React]
        Reagisci -->|Cache| KV[Cache KV ossigeno]
    fine
    
    sottoparagrafo "Il livello dati"
        Reagisci -->|Interroga| Vetrina[API vetrina Shopify]
        Reagisci -->|Interroga| CMS[CMS Sanity]
        Reagisci -->|Interroga| PIM[Akeneo PIM]
    fine

9. Hosting: Oxygen vs Vercel

Dove gestisci l’idrogeno? Opzione A: Shopify Oxygen.

Incluso in Shopify Plus.
Zero spese di uscita.
Stretta integrazione con l’API Shopify Storefront (velocità della rete privata).
Contro: Rete di nodi più piccola di Vercel.

Opzione B: Vercel.

Rete Edge più veloce.
Migliore DX (distribuzioni di anteprima).
Contro: Costoso per una larghezza di banda elevata.

Verdetto: Inizia con l’ossigeno. È “gratuito” (incluso in Plus). Passa a Vercel se hai bisogno di una logica Edge Middleware specifica che Oxygen non supporta ancora.

10. La strategia migratoria (modello Strangler)

Non riscrivere l’intero sito in una volta. Usa il Schema del fico strangolatore.

Distribuisci Hydrogen su “shop.brand.com”.
Instradare il traffico per “/products/*” verso Hydrogen.
Mantieni la casa e le collezioni su Liquid (“www.brand.com”).
Migra lentamente un tipo di pagina alla volta.
Infine, cambia DNS in Hydrogen. Ciò riduce i rischi del lancio. Misura la conversione sulla nuova pagina prodotto prima di impegnarti nell’intera ricostruzione.

12. Il divario dei talenti (realtà di assunzione)

Assumere un Liquid Dev è facile (€ 60.000). Ce ne sono milioni. Assumere uno sviluppatore di idrogeno è difficile. Hai bisogno di un “React Engineer con contesto di e-commerce”. Comandano € 150k +. Tuttavia, la carriera dello sviluppatore specializzato di Liquid è una carriera “senza uscita”. Lo sviluppo di React porta le migliori pratiche dall’ecosistema tecnologico più ampio (test, TypeScript, CI/CD). Stai pagando per Ingegneria del software, non solo per la “ottimizzazione dei temi”. Ciò eleva la qualità della tua intera presenza digitale.

13. Strategie di memorizzazione nella cache dei componenti server

RSC è veloce, ma le chiamate DB sono lente. L’idrogeno include la Cache di ossigeno. Implementiamo modelli “Stale-While-Revalidate”. const prodotto = attendono cache.get('prodotto', strategia: swr(60)). Questo serve immediatamente il prodotto obsoleto (0ms), quindi lo aggiorna in background. Utilizziamo anche la caching delle sottorichieste. Memorizziamo nella cache il “Menu” per 1 ora, ma il “Prezzo” per 1 secondo. Questo controllo granulare è impossibile in Liquid (che memorizza nella cache l’intera pagina o niente).

14. Conclusione

Se stai facendo <€ 5 milioni GMV, rimani su Liquid. Il sovraccarico derivante dalla gestione di un’applicazione React, dalla configurazione di CI/CD, dalla gestione degli errori di idratazione e dalla gestione dell’invalidazione della cache è enorme. Il liquido è “funzionante a batteria”. Funziona e basta. L’idrogeno è un “reattore nucleare”. Potenza infinita, ma se non gestisci le barre di raffreddamento si scioglie.

La lista di controllo

Hai un React Engineer interno? (Obbligatorio)
Il tuo LCP è attualmente > 2,5 s?
Stai spendendo > € 2.000 al mese sulle app Shopify solo per modifiche all’interfaccia utente?
Il tuo GMV è >10 milioni di dollari?

Se avete risposto SI a tutti, benvenuti in Hydrogen.

Conclusione

Il liquido è per i commercianti. L’idrogeno è per Marchi. Un commerciante vende prodotti. Un marchio vende un’esperienza. Quando l’esperienza diventa l’elemento di differenziazione, l’attrito di Liquid diventa più costoso dello stipendio di React Engineer.

Assumi i nostri architetti.