Headless Shopify - Un'introduzione ad Hydrogen

Il trend emerso negli ultimi anni riguardo la strategia di realizzazione di progetti ecommerce è quello dell’headless, nel quale la piattaforma non è più responsabile di fornire anche lo storefront, bensì quest’ultimo (che sia sito web, app mobile o qualunque altro punto di contatto con l’utente finale) può essere implementato con lo stack tecnologico si reputi più adatto, e andrà ad interagire con la piattaforma utilizzandone le API (generalmente REST e Graphql).

L’approccio headless è un abilitatore ed un acceleratore quando c’è la necessità di realizzare un’esperienza utente complessa e molto personalizzata, perché consente di avere “le mani libere” e scegliere gli strumenti più adatti per l’implementazione. E per lo stesso motivo, consente di raggiungere una migliore developer experience perché slega lo sviluppo del frontend dallo stack tecnologico della piattaforma ecommerce, che potrebbe risultare troppo opinionato ed in alcuni casi potrebbe “invecchiare” troppo rapidamente.

Andando ad abbracciare questo trend, a Shopify Unite 2021, tenutosi a Giugno dello scorso anno, è stata condivisa un’anteprima di Hydrogen, il framework basato su React per la creazione di storefront custom basati su Shopify, che a novembre è stato presentato in developer preview.

Hydrogen è basato su React 18, che al momento della pubblicazione di questo articolo è stato appena rilasciato in versione stabile, ed è stato utilizzato perché metterà a disposizione la funzionalità dei Server Components e la nuova architettura di server side rendering Suspense.

Questo articolo dello sviluppatore Shopify Ilya Grigorik spiega bene come sono stati utilizzati per ottenere delle performance di altissimo livello:

C’è da dire che fino a qualche settimana fa Hydrogen utilizzava una versione custom dei React Server Components, ma è in lavorazione l’adozione della versione upstream.

Al netto di questo, comunque, è possibile utilizzare con alcuni accorgimenti i componenti di Hydrogen anche in altri framework basati su React, per “iniettare” le funzionalità di ecommerce in applicazioni web pre-esistenti.

Oxygen

Un altro elemento fondamentale per ottenere le performance promesse sarà Oxygen, il worker runtime basato su V8 che sarà hostato dall’infrastruttura di Shopify, che sarà distribuito e con data store co-locato (simile a Cloudflare Workers) e consentirà un accesso alle Storefront API di Shopify con velocità nell’ordine dei pochi millisecondi. Inoltre il runtime esporrà una versione delle standard Fetch API “arricchite” con smart cache defaults e strategie configurabili di caching per accelerare l’accesso ad API di terze parti:

import {useQuery} from '@shopify/hydrogen';

function MyServerComponent() {
  const {data} = useQuery(
    '3p-data',  // custom cache key

    // execute remote data fetch
    async () => await fetch('https://my.3p.com/data.json').then((res) => res.json()),
    {
      cache: {
        maxAge: 60,                      // freshness: cache this response for 60s
        staleWhileRevalicate: 60 * 10,   // revalidation: async refresh within 600s after 60s freshness expires
      },
    }
  );
}

Sarà comunque possibile ospitare uno storefront Hydrogen su qualunque altra piattaforma (ad esempio AWS, Heroku, Vercel, Netlify, Cloudflare o anche on premise) ma in quel caso si perderebbe l’enorme vantaggio di performance dato dalla “vicinanza fisica” delle API di Shopify con Oxygen.

E il checkout?

Al momento il checkout di Shopify rimane fuori da questa rivoluzione. Non è prevista un’implementazione del checkout custom (quanto meno nelle prime versioni di Hydrogen), e l’approccio suggerito da Shopify rimane di utilizzare il redirect al checkout web.

Quindi? Via Liquid, da oggi solo Hydrogen?

Come si è visto, Hydrogen è ancora in una fase di pesante sviluppo e definizione, con alcuni grossi refactoring in corso. Ci possiamo aspettare di avere una versione stabile probabilmente entro la fine del 2022.

Al suo rilascio 1.0 Hydrogen non sarà nemmeno l’unica opzione disponibile per realizzare storefront custom per Shopify. Restando nell’ecosistema React c’è ad esempio Next.js Commerce (che pure integrerà le features di React 18 dalla prossima release), mentre spostandosi nell’ecosistema Vue c’è Vue Storefront.

Con Hydrogen, Shopify vuole fornire la sua soluzione ufficiale per la realizzazione di storefront headless. Attenzione: questo non significa che secondo Shopify una volta che Hydrogen sarà diventato generally available tutti i progetti ecommerce dovranno essere headless, bensì vuole mettere a disposizione una strada alternativa che permetta di superare i limiti dell’approccio di sviluppo basato su Liquid, limiti con i quali ci si scontra quando si affronta una tipologia di progetti più complessi.

Per una grossa fetta dei merchant che oggi utilizzano Shopify, Hydrogen (e l’approccio headless in generale) non sarà la soluzione migliore. Adottare uno storefront custom richiede di tenere in considerazione molti fattori, alcuni dei quali sono:

• avere a disposizione un team di sviluppatori in grado di padroneggiare uno stack tecnologico mediamente più complesso di Liquid
• dover gestire dei costi di infrastruttura che altrimenti, da SaaS “puro” quale è Shopify con un tema Liquid, non sarebbero necessari
• l’impossibilità di utilizzare una serie di app per Shopify che non sarebbero compatibili con uno storefront custom

Questi fattori vanno enormemente ad aumentare il costo di realizzazione e mantenimento di un tipico progetto di medie/piccole dimensioni basato su Shopify.

Ben diverso è il discorso per progetti più complessi, che hanno necessità di personalizzazione spinta dell’esperienza utente o di una forte integrazione tra diversi sistemi eterogenei sul frontend, pensiamo ad un cms headless come Storyblok o un motore di ricerca come Algolia, ma anche sistemi di single sign-on, personalizzazione dei contenuti e chi più ne ha, più ne metta.

Questa classe di progetti, che sempre più spesso stanno adottando Shopify (ed in particolare Shopify Plus) possono ottenere davvero il massimo dalla piattaforma utilizzando un approccio headless.