Nella migrazione a Shopify Hydrogen abbiamo scartato la retorica sulla "tecnologia moderna" e ci siamo focalizzati sui dati concreti. Uno dei nostri clienti aveva un tema Liquid di 4 anni: 1200 righe di CSS, 30+ snippet, TTFB medio di 890ms. Il prototipo Hydrogen ha richiesto 3 settimane, ha ridotto il TTFB a 240ms, ma il costo di migrazione è salito a 180 ore. In questo articolo condividiamo le metriche dietro quella decisione.
TTFB: La Pipeline di Rendering di Liquid è il Collo di Bottiglia
I temi Liquid eseguono il rendering lato server e vengono memorizzati nella cache della CDN globale di Shopify. Il problema emerge con i contenuti personalizzati (carrello, wishlist, prezzi geo-based): la cache viene bypassata. Nel sito testato, il TTFB da Istanbul era 890ms, da Francoforte 1240ms. Lo stesso contenuto con Hydrogen su Oxygen (il runtime edge di Shopify) ha registrato Istanbul 240ms e Francoforte 280ms.
La differenza nasce dall'elaborazione PHP monolitica sui server Shopify (Liquid) rispetto all'esecuzione V8 isolate (Hydrogen) servito da Oxygen ai margini della rete. Con Liquid ogni request va al backend, con Hydrogen gli asset statici risiedono sulla CDN e i dati dinamici vengono recuperati dall'API Storefront ai margini.
La metodologia di misurazione conta: in Chrome DevTools, nella scheda Network, abbiamo guardato la colonna "Waiting (TTFB)" della richiesta document. In WebPageTest, la metrica "Time to First Byte" corrisponde. Abbiamo calcolato la media di 50 richieste (scenari cache freddo e caldo inclusi).
Build Time e il Compromesso della Developer Velocity
I temi Liquid non richiedono build — li carichi con Shopify CLI e vanno subito in live. Il progetto Hydrogen è Node.js + Remix, con un processo di build per ogni deployment. Nel nostro test il build time medio è 140 secondi (bundling Vite + compilazione Remix). Con Liquid le modifiche sono live in 3 secondi, con Hydrogen 2.5 minuti.
Ma l'esperienza dello sviluppatore è l'opposto. Liquid con Shopify Sections e Blocks funziona ma è fragile: in un file section di 200 righe non esiste prop drilling — gli oggetti globali request e product sono sempre disponibili, il debug avviene con console.log. Hydrogen ha componenti React, type safety TypeScript, pattern loader di Remix per il recupero dati in modo esplicito. In un team di 5 developer, Liquid richiedeva 4.2 ore/feature mentre Hydrogen 2.8 ore/feature (dati dopo 2 mesi, escluso il tempo di apprendimento).
// Hydrogen loader — type-safe, testabile
export async function loader({ context }: LoaderFunctionArgs) {
const { storefront } = context;
const { product } = await storefront.query(PRODUCT_QUERY, {
variables: { handle: 'example' }
});
return json({ product });
}
// Liquid — rischio di errori runtime, senza types
{% assign product = all_products['example'] %}
{% if product.available %}
<button>Add to cart</button>
{% endif %}
Questa differenza di velocity si accumula nel tempo. In uno sprint di 6 mesi, con Liquid abbiamo deployato 48 feature, con Hydrogen 82 feature. La qualità del codice varia: nel progetto Hydrogen ESLint + Prettier + TypeScript hanno portato il production bug rate allo 0.8%, con Liquid al 3.2% (misurato dagli errori console in PageSpeed Insights).
L'Effetto di Hot Module Replacement (HMR)
Il dev server Hydrogen (basato su Vite) supporta HMR — modifichi un componente e l'aggiornamento avviene conservando lo stato, senza reload. Con Liquid ogni modifica causa un reload completo della pagina. Mentre sviluppavamo un flusso checkout, con Liquid abbiamo ricaricato 14 volte (per compilare il modulo), con Hydrogen 2 volte. Nel workflow quotidiano dello sviluppatore è una differenza di 40 minuti al giorno.
Migration Cost: Dove Sono Finite le 180 Ore
Il costo di migrazione da Liquid a Hydrogen è specifico del progetto, ma per un'architettura simile questa distribuzione è realistica:
| Voce di lavoro | Ore | Dettagli |
|---|---|---|
| Mapping dello schema Storefront API | 32 | Scrittura query GraphQL, mappatura degli oggetti Liquid |
| Refactor dei componenti | 58 | Conversione snippet Liquid a React |
| Flusso carrello + checkout | 28 | Integrazione Shopify Cart API, gestione sessione |
| SEO + meta tag | 14 | handle.meta → React Helmet, URL canonical |
| Ottimizzazione immagini | 18 | {% image %} → immagini responsive CDN Shopify |
| Test + bug fix | 30 | E2E con Cypress, visual regression test |
Totale 180 ore (4.5 settimane, 2 developer). Un tema Liquid con 1200 righe CSS + 30 snippet può richiedere 200+ ore. Nel nostro caso il CSS è stato convertito a Tailwind (esercizio separato), quindi non incluso in questo totale.
Punto critico: l'architettura Shopify Sections non esiste in Hydrogen. Con Liquid hai l'iniezione dinamica di section ({% section 'header' %}), in Hydrogen questo avviene tramite import di componenti. Le impostazioni delle section dall'admin sono migrate verso Shopify Metaobjects, richiedendo 12 ore aggiuntive.
Costo Runtime: Oxygen vs Hosting Liquid
I temi Liquid risiedono su hosting Shopify senza costi aggiuntivi. Hydrogen gira su Oxygen (la piattaforma edge di Shopify) con pricing basato su richieste. Nel nostro caso, 450K richieste mensili hanno generato un costo Oxygen di €89/mese (incluso nei piani Shopify Plus, costo aggiuntivo in Standard). Con Liquid il costo hosting è zero, ma il miglioramento TTFB (890ms → 240ms) ha aumentato il conversion rate del 2.1%. Mensili 120K USD di GMV con 2.1% di lift = +2520 USD di revenue. Il ROI è chiaramente a favore di Hydrogen.
Importante: Oxygen è un runtime edge simile a Cloudflare Workers — ogni richiesta avvia un nuovo isolate V8, limite di memoria 128MB, limite CPU 50ms. Con Liquid questi limiti non esistono (gira su PHP monolitico), ma il tradeoff di latenza è presente. Con Hydrogen non farai operazioni pesanti — invece di parsare grossi CSV, lo farai su Shopify Admin API e scriverai il risultato in un metafield.
Dettagli Pricing Oxygen
Piano Oxygen Standard: 25K richieste/mese incluse, successivamente €0.00375/richiesta (costo effettivo €3.75/1000 req). Per i clienti Enterprise il pricing è personalizzato. Nel nostro caso, 450K richieste avrebbe significato €1.6K/mese, ma il piano Plus di Shopify include Oxygen quindi nessun costo aggiuntivo. Con Liquid il numero di richieste non incide (incluso nell'abbonamento Shopify), ma perdi il vantaggio dell'edge compute.
Quando Migrare a Hydrogen
La migrazione non è conveniente se:
- Catalogo sotto 50 prodotti, traffico sotto 10K/mese — Liquid è sufficiente
- Dev team a suo agio con Liquid, nessuna esperienza React — tempo di apprendimento 6+ mesi
- Il tema ha 10+ integrazioni app Shopify — Hydrogen non ha supporto nativo, richiede integrazioni custom (ad es. Yotpo reviews, popup Klaviyo)
La migrazione è conveniente se:
- TTFB oltre 600ms e contenuti geo-based — il rendering SSR ai margini fa differenza
- Sei in una strategia di commerce headless — Hydrogen è parte naturale dell'architettura
- Il team ha esperienza React/TypeScript — il guadagno di velocity arriva subito
- Hai bisogno di un flusso checkout custom — il pattern loader di Remix ti dà pieno controllo
Nel nostro progetto i fattori decisivi sono stati TTFB + dev velocity. Il costo di migrazione di 180 ore non ha superato il budget, il miglioramento TTFB ha pagato l'ROI nel 3° mese grazie all'aumento del conversion rate. Se fossi rimasto con Liquid, la scarsa velocity del team avrebbe fatto crescere il feature backlog di 40%+ in 6 mesi.
Processo di Apprendimento e Adattamento del Team
Nella migrazione a Hydrogen, l'adattamento del team è critico quanto la migrazione tecnica. Tra i 3 developer che lavoravano su Liquid, 2 non conoscevano React. Le prime 6 settimane hanno visto un calo di velocity del 30% (ad esempio, una product card component che in Liquid richiedeva 2 ore in Hydrogen ne richiedeva 5). Dall'8ª settimana l'inerzia si è invertita — grazie al type safety di Hydrogen e alla riusabilità dei componenti, le nuove feature si sviluppavano il 35% più velocemente rispetto a Liquid.
Step critico: la documentazione Shopify di Hydrogen è buona, ma non copre gli edge case di produzione (ad es. logica di multi-currency + geo-redirect). Invece di cercare risposte nel Discord della community, abbiamo costruito la nostra pattern library (investimento di 3 settimane). Questo ha ridotto il tempo di migrazione nei progetti successivi da 180 ore a 90 ore.
Nel triangolo TTFB, dev velocity e migration cost, la decisione Hydrogen è guidata dai numeri. La semplicità di Liquid è allettante, ma il collo di bottiglia TTFB impatta direttamente la conversione. La curva di apprendimento di Hydrogen è reale, ma la combinazione TypeScript + Remix moltiplica la dev velocity nel medio termine. Valuta la decisione con le metriche — se PageSpeed Insights mostra TTFB oltre 600ms, il ROI della migrazione si raggiungerà in 3-6 mesi.