L'headless ecommerce di Shopify: come funzionano Hydrogen e Oxygen

Shopify propone una soluzione completa per realizzare ecommerce headless, e lo fa restando fedele alla sua filosofia: darti uno stack nativo e integrato, invece di lasciarti mettere insieme pezzi di terze parti che poi devi tenere allineati a mano. Il risultato è un modo di andare headless con Shopify che riduce l'attrito e i mal di testa tipici di queste architetture.

In questo articolo vediamo com'è fatto lo stack headless di Shopify, quali sono i suoi componenti, cosa lo distingue dalle soluzioni di terze parti e quando ha senso adottarlo. Se ti serve la definizione di partenza, l'abbiamo raccolta nell'articolo su cos'è un ecommerce headless.

Lo stack headless di Shopify

Andare headless significa separare il motore commerciale dal front end, i due che dialogano via API. Shopify copre ognuno di questi strati con un componente pensato per incastrarsi con gli altri. Sono, essenzialmente, quattro pezzi.

Il back end resta Shopify. Prodotti, inventario, prezzi, clienti, ordini e soprattutto il checkout restano gestiti dalla piattaforma, con il suo admin e la sua infrastruttura di pagamento. È la parte che non conviene mai reinventare, ed è il motivo per cui andare headless con Shopify è meno rischioso che costruirsi tutto da zero.

La Storefront API fa da ponte. È l'interfaccia GraphQL che alimenta il front end con prodotti, collezioni, carrello e ricerca; la Customer Account API gestisce login e area cliente. Chiedi esattamente i dati che ti servono, e li ottieni nel formato giusto per lo storefront.

Hydrogen costruisce lo storefront. È il framework React ufficiale per la vetrina headless, con componenti, hook e utility già mappati sulle API di Shopify.

Oxygen ospita le pagine. È l'hosting sull'edge, distribuito nel mondo, su cui pubblichi lo storefront Hydrogen. Per attivare tutto serve installare il canale Hydrogen sullo store, che abilita hosting, ambienti di deploy e log.

Attorno a questi quattro pezzi resta poi disponibile tutto il resto dell'ecosistema Shopify, e questa è una parte del valore che spesso si sottovaluta. Le funzioni per vendere all'estero con Shopify Markets, le funzioni B2B per la vendita alle aziende, le estensioni del checkout: tutto continua a funzionare sotto lo storefront headless, perché vive nel back end. Andare headless con Shopify non significa rinunciare alle funzioni della piattaforma, significa metterci davanti una vetrina costruita su misura. È il motivo per cui lo stack ha senso soprattutto per progetti articolati, dove queste funzioni servono davvero.

Hydrogen storefront

Hydrogen è la soluzione ufficiale di Shopify per costruire gli storefront headless, cioè le teste dell'ecommerce, le pagine viste dal pubblico. È open source, distribuito come pacchetto @shopify/hydrogen, e nasce per accelerare lo sviluppo su tre fronti.

Sviluppo più rapido. Parti da template già pronti e da una libreria di componenti, hook e utility che rendono immediato il lavoro con le API di Shopify. Carrello, ricerca, varianti, localizzazione: scenari già risolti, invece di codice da scrivere da zero.

Tecnologie moderne e diffuse. Hydrogen è costruito su React Router, il framework open source nato dalla confluenza con Remix, con Vite come motore di build e il supporto a TypeScript. Non un mondo proprietario isolato, ma tecnologie che gli sviluppatori già conoscono: chi sa usare React e React Router è già a metà dell'opera.

Performance in primo piano. Hydrogen punta forte sul rendering lato server, spinto fino all'edge grazie a Oxygen. La pagina arriva al browser già pronta, si mostra subito e carica in modo progressivo i dati che le stanno dietro, come le varianti di prodotto o le funzioni sui pulsanti.

Il rendering sul server, per un'applicazione JavaScript che nativamente farebbe l'opposto, sblocca tre cose concrete: velocizza il primo caricamento, perché la pagina è già pronta e non va calcolata dal browser; aumenta la sicurezza, perché non espone dati grezzi; e migliora la SEO, perché un contenuto già renderizzato è più facile da indicizzare. Va però sviluppato con criterio: più elementi metti nella pagina, più incidi sui tempi, e questo vale sempre, headless o no.

Chi lo racconta ancora come un framework proprietario con un motore di rendering tutto suo sta descrivendo una versione superata. Oggi un progetto Hydrogen è un'applicazione React Router preconfigurata per parlare con Shopify: credenziali API gestite, componenti pronti, strumenti da riga di comando per sviluppo, test e deploy.

Oxygen, l'hosting pensato per Hydrogen

Oxygen è la piattaforma di hosting serverless che Shopify ha costruito apposta per gli storefront Hydrogen. Distribuisce le pagine sull'edge, con oltre cento nodi nel mondo, così il negozio carica veloce ovunque si trovi il cliente, e si integra con la CDN di Shopify. È la soluzione consigliata ufficialmente, ed è inclusa senza costi aggiuntivi: non devi più mettere in piedi e mantenere un'infrastruttura dedicata.

Oltre a servire le pagine, Oxygen gestisce gli ambienti di lavoro. Puoi tenere più versioni di uno storefront, condividere anteprime prima della pubblicazione, confrontare versioni diverse in ambienti isolati e testare modifiche senza toccare quella live. In pratica è utile quando vuoi ospitare uno storefront Hydrogen, condividere un'anteprima con chi non ha accesso all'admin, mettere a confronto più versioni prima di scegliere quella da pubblicare, o sperimentare in sicurezza. Chi preferisce restare libero può comunque ospitare Hydrogen altrove, su runtime come Vercel, Netlify o Cloudflare, ma la strada più semplice, e integrata, è Oxygen.

Il vantaggio dell'integrazione nativa

La differenza tra lo stack di Shopify e un'accozzaglia di soluzioni di terze parti sta tutta qui. Usare un framework e un hosting completamente integrati con Shopify, sviluppati dallo stesso team e che evolvono nella stessa direzione, riduce drasticamente le frizioni e gli inconvenienti di percorso. Quando la piattaforma introduce una funzione nuova, lo stack la supporta; quando qualcosa cambia, cambia in modo coordinato. Per un progetto complesso, dove le variabili da gestire sono già tante, togliere di mezzo il rischio di integrazioni fragili tra sistemi diversi è un valore concreto.

C'è però un pezzo che Hydrogen non copre, ed è giusto dirlo: i contenuti editoriali. Hydrogen costruisce la vetrina, ma non è un CMS pensato per chi fa marketing. Per questo, in un progetto headless su Shopify, il ruolo di CMS va assegnato a uno strumento dedicato, e la scelta che preferiamo è Sanity, che si integra in modo naturale con Hydrogen. Il catalogo arriva da Shopify via Storefront API, i contenuti da Sanity, e si compongono nella stessa pagina. È il modello con cui è costruito questo stesso blog, ed è quello che vediamo funzionare meglio quando serve un CMS accanto a Hydrogen.

L'integrazione nativa ha anche un effetto sul go to market, cioè sulla velocità con cui porti online un'esperienza nuova. Con uno stack coordinato, dove framework, hosting e API parlano la stessa lingua, il tempo che intercorre tra l'idea e la sua messa in produzione si accorcia, e soprattutto diventa prevedibile. È il contrario di quello che succede quando tieni insieme pezzi eterogenei, dove ogni aggiornamento di uno rischia di far saltare gli altri e ti costringe a rincorrere le compatibilità. Per un'azienda che deve muoversi in fretta su un mercato che cambia, questa prevedibilità vale quanto la performance.

Hydrogen e Liquid: non è una gara

Per capire dove sta Hydrogen conviene metterlo accanto a Liquid, il linguaggio di templating storico di Shopify. Liquid è la spina dorsale dei temi tradizionali: gira dentro la piattaforma, combina elementi statici e dati dinamici del negozio, ed è il modo con cui è costruita la stragrande maggioranza degli store Shopify. È maturo, collaudato, veloce da mettere in produzione e comodo da mantenere per chi non ha un team di sviluppo strutturato.

Hydrogen non sostituisce Liquid: risponde a un bisogno diverso. Serve quando vuoi separare del tutto il front end dal back end e costruire un'esperienza su misura con React, uscendo dai vincoli del tema. Non è che uno sia meglio dell'altro in assoluto; sono strumenti per scenari diversi. E siccome i temi moderni, con l'architettura Online Store 2.0, hanno colmato quasi tutto il divario storico, in termini di libertà grafica, contenuti flessibili e performance, nella maggior parte dei progetti la scelta ragionevole resta il tema Liquid. Hydrogen entra quando quel confine viene superato per davvero.

Quando ha senso lo stack headless di Shopify

Come per ogni scelta headless, la domanda non è se lo stack di Shopify sia valido, ma se serve al tuo progetto. E la risposta onesta è che, nella maggior parte dei casi, un tema moderno basato su Online Store 2.0 arriva dove devi arrivare: libertà grafica, contenuti flessibili con sezioni e metafield, performance e SEO eccellenti, a una frazione del costo. Velocità, ottimizzazione e personalizzazione visiva, i tre argomenti storici a favore dell'headless, oggi si risolvono in larga parte dentro un tema.

Lo stack Hydrogen e Oxygen ha senso quando esistono esigenze che il tema non copre: esperienze fuori dagli schemi, omnicanalità reale su più teste, configuratori complessi, progetti internazionali con molti mercati, team che vogliono il controllo totale del front end. Sono scenari che si incontrano soprattutto in ambito enterprise, ed è il motivo per cui headless e progetti su Shopify Plus tendono a viaggiare insieme. Su cosa distingue le versioni della piattaforma, e su cosa sblocca il livello superiore, abbiamo un pezzo dedicato alle differenze tra Shopify e Shopify Plus.

Brand ed esempi reali

Che lo stack regga sul campo lo dimostrano i brand che ci hanno costruito il proprio business. Allbirds ha ricostruito il sito su Hydrogen gestendo decine di mercati, negozi fisici e app mobile sullo stesso back end Shopify: un'architettura omnicanale che sfrutta lo stack fino in fondo. Gymshark usa Hydrogen e Oxygen per reggere i picchi dei lanci, con caricamenti sensibilmente più rapidi. SKIMS e Good American puntano su esperienze di prodotto ricche e funzioni su misura.

I casi che preferiamo, come agenzia, sono quelli che affiancano Hydrogen a un CMS headless. Il sito di Lady Gaga unisce Hydrogen a Sanity per fondere storefront e spazio editoriale; Manors, brand di abbigliamento da golf londinese, usa Hydrogen per il commercio e Sanity per i contenuti e le schede prodotto arricchite. Sono la prova concreta del modello che raccontiamo: Shopify per il commercio, Sanity per i contenuti, un frontend Hydrogen a comporre tutto.

Il filo comune di questi progetti è che l'headless non è mai stato il punto di partenza, ma la conseguenza di un bisogno. Nessuno di questi brand è andato headless per dire di esserlo: ci è arrivato perché aveva un'esigenza, di scala, di esperienza o di canali, che il tema non copriva. È la stessa logica con cui valutiamo ogni progetto, e il motivo per cui, quando un tema Online Store 2.0 basta, lo diciamo senza girarci intorno.

Domande frequenti

Oxygen è disponibile solo su Shopify Plus?

L'hosting su Oxygen è incluso senza costi aggiuntivi e legato all'installazione del canale Hydrogen. Nella pratica, però, i progetti headless hanno quasi sempre requisiti da enterprise che li portano su Shopify Plus, quindi headless e Plus tendono a coincidere.

Devo per forza usare Oxygen con Hydrogen?

No. Oxygen è la soluzione consigliata e la più integrata, ma puoi ospitare uno storefront Hydrogen anche su altri runtime JavaScript, come Vercel, Netlify o Cloudflare. Cambiando l'adapter, Hydrogen si adatta al runtime scelto.

Hydrogen sostituisce il tema Shopify?

Solo nei progetti headless. Nella maggior parte dei casi il tema, basato su Online Store 2.0, resta la scelta giusta e più conveniente. Hydrogen entra in gioco quando servono esperienze che il tema non può offrire.

Le funzioni B2B e Markets funzionano con Hydrogen?

Sì. Vendita all'ingrosso, gestione dei mercati internazionali ed estensioni del checkout vivono nel back end di Shopify e continuano a funzionare sotto uno storefront headless. Andare headless non ti fa perdere le funzioni della piattaforma: ci costruisci sopra una vetrina su misura.

In sintesi

Lo stack headless di Shopify si regge su Hydrogen, il framework React costruito su React Router per lo storefront, e su Oxygen, l'hosting sull'edge incluso e integrato con la piattaforma, con la Storefront API a fare da ponte e il back end che resta Shopify. Il vantaggio rispetto alle soluzioni di terze parti è l'integrazione nativa, che toglie attrito e rischio; il pezzo mancante, i contenuti editoriali, si copre con un CMS headless come Sanity.

Resta valida la regola di fondo: lo stack headless di Shopify è potente, ma serve quando l'esperienza da offrire supera davvero ciò che un tema Online Store 2.0 consente. Capire dove passa quel confine, e non adottare l'headless per moda, è il tipo di valutazione che facciamo con metodo su ogni progetto.