Shopify Hydrogen: cos'è, come funziona e quando serve un sistema headless

Per anni la parola headless ha significato una cosa sola: separare il software che gestisce il commercio da quello che disegna le pagine viste dal pubblico. È un concetto potente, ma anche uno dei più fraintesi del nostro settore, perché viene raccontato quasi sempre in astratto. In realtà un sistema headless è qualcosa che tocchi con mano ogni giorno, spesso senza accorgertene.

Questo stesso blog, per esempio, è un progetto headless. I contenuti che stai leggendo vivono dentro Sanity, un CMS headless, mentre le pagine vengono servite da un frontend ospitato su server Amazon: due software distinti che si parlano via API. Nessun tema monolitico, nessuna piattaforma unica che fa tutto. È la dimostrazione più concreta di cosa voglia dire disaccoppiare il back end dal front end.

Shopify Hydrogen porta questa stessa logica dentro il commercio elettronico. È il framework ufficiale con cui Shopify permette di costruire lo storefront, cioè la parte pubblica di un ecommerce headless, mantenendo tutta la potenza del suo motore commerciale sotto il cofano. In questo articolo spieghiamo cos'è, come funziona, quali componenti servono per mettere in piedi un sistema headless completo, cosa mette a disposizione Shopify oltre a Hydrogen, e soprattutto quando un'architettura del genere serve davvero e quando invece è una complessità che non ti ripaga.

Cos'è un sistema headless e che ruolo ha nell'ecosistema

Un ecommerce headless è un negozio online in cui il software che gestisce carrello, catalogo, utenti, ordini, pagamenti e spedizioni è separato, tecnicamente disaccoppiato, dal software che gestisce le pagine, i contenuti e l'esperienza di navigazione. Il back end si occupa del commercio; il front end si occupa di come quel commercio viene mostrato. I due dialogano attraverso le API, le interfacce che si scambiano dati e funzioni in modo strutturato.

La parola head, testa, indica proprio il front end: la parte visibile, la vetrina. Togliere la testa, andare headless, significa liberare la vetrina dai vincoli imposti dal motore commerciale, così da poterla costruire con qualsiasi tecnologia moderna e disegnarla senza compromessi. Se vuoi la definizione estesa, l'abbiamo raccolta nell'articolo su cos'è un ecommerce headless.

Nell'ecosistema del commercio digitale l'approccio headless occupa una posizione precisa: sta al centro tra la libertà totale di uno sviluppo custom e la solidità di una piattaforma gestita. Ti dà il controllo pieno sull'esperienza utente senza obbligarti a reinventare carrello, checkout e gestione ordini, che restano compiti del back end. All'estremo più componibile della scala c'è Commerce Components, con cui si prendono i singoli pezzi del motore Shopify e si montano dentro un'architettura propria. È una scelta architetturale, non un prodotto che compri: e come ogni scelta architetturale, ha senso solo quando i benefici superano i costi di gestione.

Come funziona: la struttura e i componenti di un sistema headless

Per capire Hydrogen conviene prima avere chiara l'anatomia di un progetto headless. Non è un singolo software, è un insieme di strati che collaborano. Ne servono quattro, ed è utile passarli in rassegna uno per uno, perché ognuno risolve un problema diverso.

Il motore commerciale (back end). È il cuore che gestisce prodotti, inventario, prezzi, clienti, ordini e soprattutto il checkout. Nel caso di Shopify questo strato resta Shopify: continui a usare l'admin, le sue funzioni e la sua infrastruttura di pagamento senza interruzioni. È la parte che non conviene mai reinventare, perché è dove si concentrano sicurezza, conformità e affidabilità. Dove serve piegarne la logica, sconti o spedizioni che seguono regole tutte tue, non si riscrive il motore: si usano le Shopify Functions.

Il livello di dati (le API). È il ponte che permette al front end di chiedere informazioni al back end e di attivare funzioni, come aggiungere un prodotto al carrello. Shopify espone la Storefront API, pensata proprio per alimentare esperienze pubbliche, e la Customer Account API per gestire login e area cliente. Il formato è GraphQL: chiedi esattamente i dati che ti servono, né più né meno.

Il front end (lo storefront). È la vetrina vera e propria: le pagine, i componenti, l'interazione. Qui vive la libertà dell'headless, perché puoi costruirlo con la tecnologia che preferisci. È lo strato che il cliente vede e tocca, ed è dove si gioca la differenza di esperienza tra un brand e l'altro.

Il CMS headless. Il front end mostra prodotti, ma un ecommerce è fatto anche di contenuti editoriali: pagine, storie di brand, landing, blog. Gestirli a codice sarebbe un incubo per chi fa marketing, quindi si affianca un CMS headless che permette al team di pubblicare e modificare contenuti in autonomia, senza toccare lo sviluppo. Su questo torniamo tra poco, perché è il punto dove Sanity entra in gioco.

L'hosting. Le pagine del front end vanno servite da qualche parte, possibilmente vicino all'utente per essere veloci ovunque. Qui entra in gioco l'hosting, meglio se distribuito sull'edge, cioè su una rete di server sparsi nel mondo che consegnano la pagina dal nodo più vicino a chi la richiede.

Il nostro blog, tanto per restare all'esempio concreto, monta esattamente questa architettura: Sanity come CMS headless per i contenuti, un frontend che li richiede via API e li renderizza, e server Amazon a fare da hosting. Cambia il dominio applicativo, dai contenuti al commercio, ma lo schema è identico. Ed è lo schema che Shopify ha deciso di rendere nativo con la sua soluzione headless.

Cosa mette a disposizione Shopify per andare headless

La differenza tra montare un sistema headless con pezzi di terze parti e usare la soluzione di Shopify sta tutta nell'integrazione. Shopify non ti lascia solo con le API in mano: ti dà un intero stack pensato perché i vari strati si incastrino senza attrito. Vediamo i componenti principali.

Hydrogen, il framework per lo storefront

Hydrogen è il framework ufficiale di Shopify per costruire lo storefront di un ecommerce headless. È open source, distribuito come pacchetto @shopify/hydrogen, e mette a disposizione componenti, hook e utility già mappati sulle API di Shopify. In pratica, invece di scrivere da zero la logica per il carrello, la ricerca, le varianti prodotto o la gestione di più mercati, parti da mattoni pronti e collaudati, riducendo enormemente il codice ripetitivo.

Il vantaggio non è solo la velocità di sviluppo. Essendo costruito dallo stesso team che sviluppa Shopify, Hydrogen evolve nella stessa direzione della piattaforma: quando Shopify introduce una funzione nuova, Hydrogen è tra i primi a supportarla. È un ecosistema che si muove all'unisono, e questo per un progetto enterprise significa meno rischio di ritrovarsi con integrazioni che si rompono a ogni aggiornamento.

Oxygen, l'hosting sull'edge

Oxygen è la piattaforma di hosting serverless che Shopify ha costruito apposta per gli storefront Hydrogen. Distribuisce le pagine su una rete globale con oltre cento nodi nel mondo, così il sito carica veloce ovunque si trovi il cliente, e gestisce ambienti di deploy, variabili d'ambiente, cache e integrazione con la CDN di Shopify. Il dettaglio che cambia le carte in tavola: il deploy su Oxygen è incluso senza costi aggiuntivi. Non devi più mettere in piedi e mantenere un'infrastruttura dedicata, come invece facevamo noi con i server Amazon del blog. Su come Oxygen regge lo storefront insieme a Hydrogen, ambienti e deploy compresi, abbiamo un pezzo a parte.

Chi vuole restare libero può comunque ospitare Hydrogen altrove, su Vercel, Netlify, Cloudflare o altri runtime JavaScript. Ma la strada consigliata, e la più semplice, è Oxygen, perché elimina un intero strato di problemi infrastrutturali.

Storefront API, Customer Account API e il canale Hydrogen

Sotto Hydrogen lavorano le API di Shopify. La Storefront API alimenta lo storefront con prodotti, collezioni, carrello e ricerca; la Customer Account API gestisce login e area personale. Per attivare tutto serve installare il canale Hydrogen sullo store, che abilita l'hosting su Oxygen, la gestione degli ambienti e l'accesso ai log di deploy. È il collante che tiene insieme sviluppo e piattaforma.

La compatibilità con Sanity e il ruolo del CMS headless

Qui arriviamo al punto che ci sta più a cuore. Hydrogen costruisce la vetrina, ma non è un CMS: non è pensato per far gestire i contenuti editoriali a chi fa marketing. Per questo, in un progetto headless con Shopify, il ruolo di CMS va assegnato a uno strumento dedicato, e la scelta che preferiamo è Sanity.

Sanity è un CMS headless che si integra in modo naturale con Hydrogen: esistono client e strumenti già pronti per far dialogare i due sistemi, così i dati di prodotto arrivano da Shopify via Storefront API e i contenuti editoriali, storie, landing, gallerie, arrivano da Sanity, componendosi nella stessa pagina. Il team commerciale gestisce il catalogo dove è giusto gestirlo, in Shopify; il team marketing gestisce i contenuti dove è giusto gestirli, in Sanity, senza chiedere una modifica allo sviluppo per ogni virgola. È esattamente il modello con cui abbiamo costruito questo blog, ed è il motivo per cui, quando un progetto headless su Shopify ha bisogno di un CMS, il posto lo diamo a Sanity. Se vuoi capire perché, ne parliamo nell'articolo dedicato a quando un ecommerce headless ha bisogno di un CMS headless.

Come funziona Hydrogen nel dettaglio

Fatta l'anatomia generale, entriamo dentro Hydrogen. Sapere come è costruito aiuta a capire cosa può fare e dove sono i suoi limiti.

Costruito su React Router, con Vite come motore di build

Hydrogen è un framework React. Nella sua forma attuale poggia su React Router, il framework open source nato dalla confluenza con Remix, che gestisce routing, recupero dei dati, rendering lato server, reattività dell'interfaccia e stile. Il build è affidato a Vite, uno strumento di nuova generazione, moderno e veloce. In pratica un progetto Hydrogen è un'applicazione React Router preconfigurata con tutto ciò che serve per parlare con Shopify: credenziali API già gestite, componenti pronti per i dati di Shopify, strumenti da riga di comando per sviluppare, testare e pubblicare.

Questo è un punto importante e spesso raccontato male in giro: chi descrive Hydrogen come un framework a sé, con un suo sistema proprietario di rendering, sta fotografando una versione vecchia. Oggi Hydrogen è, a tutti gli effetti, un'app React Router con superpoteri Shopify. La conseguenza pratica è che uno sviluppatore che conosce React e React Router è già a metà dell'opera, e non deve imparare un mondo isolato.

Componenti, hook e utility mappati sulle API

Il valore quotidiano di Hydrogen sta nei suoi mattoni. Fornisce componenti già pronti per le entità di Shopify, hook per recuperare e gestire i dati, utility per le operazioni ricorrenti. Il carrello, la ricerca, la gestione delle varianti, la localizzazione per vendere in più lingue e valute: sono tutti scenari che Hydrogen affronta con strumenti nativi, invece di lasciarti reinventare la ruota. Il formato dei dati si conforma ai modelli GraphQL della Storefront API, quindi tutto combacia senza traduzioni artigianali. E se un dato arriva da una fonte diversa, come i contenuti da Sanity, basta armonizzarlo perché i componenti lo gestiscano allo stesso modo.

Rendering sul server e sull'edge, per la velocità

Uno dei motivi per cui Hydrogen esiste è la performance. Le applicazioni React nate per il browser, di norma, calcolano e disegnano le pagine lato client, il che rallenta il primo caricamento e complica l'ottimizzazione per i motori di ricerca. Hydrogen ribalta la logica con il rendering lato server, spinto fino all'edge grazie a Oxygen: la pagina arriva al browser già pronta, si mostra subito e poi carica in modo progressivo i dati che le stanno dietro. Il risultato sono primi caricamenti rapidi, migliore indicizzazione e un controllo fine sulla cache. In termini più tecnici, il rendering sul server porta tre benefici concreti.

• Velocità: la pagina viene consegnata pronta e non deve essere calcolata dal browser, quindi il primo caricamento è più rapido.
• Sicurezza: il server non espone dati grezzi e non richiede al browser di accedere direttamente alle API.
• SEO: un contenuto già renderizzato lato server è più facile da leggere e indicizzare per i motori di ricerca.

Template di partenza

Per non partire dal foglio bianco, Hydrogen mette a disposizione template e progetti d'esempio già strutturati. Ci si trova la struttura di base di un'app già collegata a uno store Shopify, così lo sviluppo comincia dalla personalizzazione e non dalla configurazione. È un modo per accorciare le prime settimane di lavoro, che sono spesso quelle in cui si perde più tempo.

Il lato da conoscere: manutenzione e maturità

Un pilastro onesto racconta anche i limiti. Hydrogen è giovane rispetto a framework generalisti come Next.js o Nuxt, che hanno alle spalle anni di ecosistema, librerie e soluzioni collaudate per ogni problema. Il suo punto di forza è la specializzazione, si concentra solo sull'implementare le API di Shopify, ma questo significa anche che ogni interazione dell'utente dopo il primo caricamento va progettata con attenzione, perché una pagina troppo carica pesa sui tempi tanto quanto il primo rendering. Rispetto al rendering lato client, il vantaggio del server è che la pagina si mostra subito e i dati arrivano dopo, in modo progressivo; ma resta uno strumento da usare con cognizione di causa, non una bacchetta magica che rende tutto veloce a prescindere da come è costruito.

Hydrogen contro i temi Shopify: quando serve davvero l'headless

Ed eccoci alla domanda che conta, quella che pesa sul budget e sul progetto. Se Hydrogen è così potente, perché non farci tutti i siti? La risposta onesta è che, nella grande maggioranza dei casi, non serve. Ed è un'onestà che come agenzia teniamo a mettere sul tavolo, perché consigliare headless quando basta un tema è il modo più rapido per far spendere male i soldi a un cliente.

La ragione è che i temi moderni di Shopify, quelli basati sull'architettura Online Store 2.0, hanno colmato quasi tutto il divario che un tempo spingeva verso l'headless. Con le sezioni disponibili su ogni pagina, i blocchi app, i metafield e i metaobject, oggi un tema Shopify ben costruito permette libertà grafica ampia, contenuti flessibili e performance eccellenti. La velocità, la SEO e la personalizzazione visiva, che erano i tre argomenti storici a favore dell'headless, si risolvono in larga parte dentro un tema 2.0, con una frazione del costo e della complessità.

Quando allora ha senso andare headless con Hydrogen? Quando esistono esigenze che il tema, per quanto spinto, non copre. Qualche esempio concreto: esperienze di navigazione fuori dagli schemi, con interazioni ricche e logiche di interfaccia complesse; architetture omnicanale che devono servire lo stesso back end a più teste diverse, come sito, app e totem in negozio; configuratori di prodotto sofisticati; progetti internazionali con decine di mercati e requisiti di localizzazione profondi; team di sviluppo strutturati che vogliono il pieno controllo sul front end. In questi casi il costo dell'headless si giustifica, perché sblocca cose altrimenti impossibili.

La regola che seguiamo è semplice: si parte dall'esperienza che si vuole offrire e dalla complessità che si è disposti a gestire, non dalla moda. Se un tema 2.0 arriva dove devi arrivare, quello è il punto. Se non ci arriva, allora Hydrogen è lo strumento giusto, e vale la pena affrontarne il costo. Sul confronto tra le versioni della piattaforma, e su cosa sblocca il livello superiore, abbiamo un pezzo dedicato alle differenze tra Shopify e Shopify Plus.

Shopify headless nel mondo reale: brand ed esempi

La teoria regge, ma la prova del nove sono i brand che ci hanno costruito sopra il proprio business. Hydrogen, nato come esperimento, è diventato in pochi anni una scelta credibile per aziende importanti, e vale la pena guardare chi e come.

Il caso più citato è Allbirds, che ha ricostruito il proprio sito su Hydrogen gestendo la localizzazione per decine di mercati e l'integrazione con la rete di negozi fisici e con l'app mobile, il tutto sullo stesso back end Shopify via Storefront API. Un'architettura omnicanale vera, che sfrutta lo stack fino in fondo. Gymshark, nel settore dell'abbigliamento fitness, ha scelto Hydrogen e Oxygen per reggere i picchi di traffico dei lanci, riportando caricamenti sensibilmente più rapidi. SKIMS e Good American usano Hydrogen per esperienze di prodotto ricche e per funzioni su misura, come la gestione avanzata delle taglie.

Per noi, però, gli esempi più eloquenti sono quelli che uniscono Hydrogen a un CMS headless. Il sito di Lady Gaga è stato costruito su Hydrogen con Sanity a gestire i contenuti, fondendo storefront e spazio editoriale in un unico luogo. Manors, brand di abbigliamento da golf londinese, segue la stessa strada: Hydrogen per il commercio, Sanity per la parte editoriale e le schede prodotto arricchite di contenuti. Sono progetti che confermano, sul campo, il modello che raccontiamo: Shopify per il commercio, Sanity per i contenuti, un frontend Hydrogen a comporre il tutto.

Un ultimo dettaglio che dice molto: quasi tutti questi brand hanno alle spalle esigenze da enterprise, cataloghi ampi, più mercati, integrazioni con sistemi esistenti, volumi che vanno retti nei momenti di picco. Non sono negozi piccoli che hanno scelto l'headless perché fa moderno; sono aziende che avevano un problema preciso che il tema non risolveva. È la conferma pratica della regola che ripetiamo: l'headless entra in gioco dove la complessità è reale e paga, non come scelta di default.

Domande frequenti

Hydrogen è gratis?

Sì, Hydrogen è open source e il pacchetto è liberamente utilizzabile. Anche il deploy su Oxygen è incluso senza costi aggiuntivi. Quello che ha un costo, e non piccolo, è lo sviluppo: costruire uno storefront headless richiede competenze e tempo superiori rispetto a personalizzare un tema.

Serve Shopify Plus per usare Hydrogen?

Hydrogen e Oxygen sono accessibili anche fuori dal piano più alto, ma i progetti headless veri hanno quasi sempre requisiti, di scala, integrazioni, controllo, che li portano su Shopify Plus. Nella pratica, headless ed enterprise viaggiano insieme.

Qual è la differenza tra Hydrogen e Liquid?

Liquid è il linguaggio di templating con cui si costruiscono i temi tradizionali di Shopify: gira dentro la piattaforma e va benissimo per la stragrande maggioranza dei negozi. Hydrogen è un framework React per costruire storefront headless separati dal back end. Non è che uno sia meglio dell'altro in assoluto: rispondono a bisogni diversi, e nella maggior parte dei casi il tema Liquid moderno è la scelta giusta.

Un progetto Hydrogen ha bisogno di un CMS?

Quasi sempre sì. Hydrogen disegna la vetrina ma non gestisce i contenuti editoriali in modo comodo per chi fa marketing. Affiancare un CMS headless come Sanity permette al team di pubblicare e aggiornare contenuti in autonomia, mentre Shopify resta il motore del commercio.

In sintesi

Shopify Hydrogen è la risposta nativa di Shopify alla domanda di storefront headless: un framework React, costruito su React Router e servito sull'edge da Oxygen, che ti dà componenti pronti e integrazione profonda con la piattaforma. Attorno gli girano la Storefront API, la Customer Account API e, per i contenuti, un CMS headless come Sanity, con cui si integra in modo naturale. È lo stesso schema, motore commerciale più front end disaccoppiato più CMS più hosting, su cui gira anche questo blog.

La cosa più utile che possiamo dire non è come si costruisce, ma quando conviene costruirlo. Un sistema headless serve quando l'esperienza che vuoi offrire supera davvero ciò che un tema Online Store 2.0 già consente, perché su velocità, SEO e libertà grafica i temi moderni oggi arrivano molto lontano. Distinguere i due scenari, e non vendere complessità dove basta un tema, è esattamente il tipo di valutazione che affrontiamo con metodo in ogni progetto.