Il vincolo del monolite

Nel vecchio mondo (WordPress, Magento, Shopify 1.0), il Frontend (Il tema) e il Backend (Il database/Amministratore) erano incollati insieme. Per cambiare il colore di un pulsante, hai modificato un file .liquid o .php all’interno della struttura CMS. Questo è conveniente per i siti di piccole dimensioni. È una prigione per siti ambiziosi. Vincoli:

Prestazioni: servi HTML generato da un server PHP/Ruby lento. Non è possibile utilizzare facilmente la moderna cache Edge.
DX: non puoi usare React. Non è possibile utilizzare la Sostituzione del modulo attivo. Codifichi in un’area di testo o carichi file ZIP.
Struttura URL: sei bloccato con /products/xyz. Non puoi modificare il percorso.

La rivoluzione senza testa

Senza testa significa tagliare la testa (Frontend) dal corpo (Backend). Parlano tramite API.

Backend: Shopify / Contentful / Strapi. (Dati puri).
Frontend: Next.js / Remix / Vue. (UX pura).
Connessione: GraphQL/API REST.

Ora puoi creare il frontend come una Single Page App (SPA) ad alte prestazioni. Puoi ospitarlo su Vercel (Edge Network). Puoi recuperare i dati da Shopify e Contentful e un database personalizzato e unirli in un’unica pagina senza soluzione di continuità. L’utente non sa che sta navigando su 3 sistemi diversi.

Perché Maison Code ne parla

Noi di Maison Code siamo specializzati nel Lusso senza testa. I brand del lusso hanno bisogno di “Storytelling”. Vogliono una pagina prodotto che assomigli al trailer di un film. I temi Shopify standard non possono farlo. Sono griglie rigide. Usiamo modelli senza testa per sovrascrivere la griglia. Utilizziamo Shopify Hydrogen (framework basato su Remix) per creare vetrine personalizzate che sembrano app native, mantenendo allo stesso tempo il solido Shopify Checkout per i pagamenti. Ne parliamo perché la Differenziazione richiede il controllo del codice.

Lo stack: JAMstack 2.0

Motore di commercio: Shopify Plus o BigCommerce. (Gestisce il carrello, il checkout, l’inventario).
CMS: contenuto o sanità mentale. (Gestisce rich text, post di blog, layout di pagine di destinazione).
Framework frontend: Next.js o Remix.
Hosting: Vercel o Netlify.

Il Commercio “Componibile”.

Ciò ti consente di scegliere il “migliore della razza”. Non ti piace il motore del blog di Shopify? (È terribile). Mantieni Shopify per i prodotti, ma passa a Sanity CMS per il blog. Non ti piace Shopify Search? Scambia in Algolia. In un Monolito sei bloccato con gli strumenti integrati. In Headless, componi lo stack dei tuoi sogni.

7. Contenuti federati (The Mesh)

In un monolite, tutti i dati risiedono in un database SQL. In Headless, i dati vivono ovunque. Utilizziamo la GraphQL Federation (Stitching).

Prodotto proviene da Shopify.
Le Recensioni provengono da Yotpo.
Editoriale deriva da Sanity.
Raccomandazioni provengono da Rebuy. Il frontend interroga un endpoint (The Mesh). La Mesh chiama i servizi in parallelo. Questo è più veloce dell’esecuzione sequenziale e più pulito dello spaghetti code nel client.

8. Modalità anteprima: L’anello mancante

Gli esperti di marketing odiano Headless perché “non riesco a vedere ciò che sto modificando”. Nell’editor dei temi di Shopify, vedrai le modifiche immediatamente. In Headless, premi “Salva” in Contentful, attendi 2 minuti per la creazione… inutile. Soluzione: modalità di anteprima Next.js/anteprima live di Sanity. Costruiamo un ponte in tempo reale. Quando il Marketer digita Sanity, utilizziamo “postMessage” per aggiornare istantaneamente specifici nodi DOM nell’app React. Sembra un editor WYSIWYG, ma genera codice React pulito.

9. Caso di studio: configuratore di prodotti personalizzati

Immagina di vendere un abito personalizzato. L’utente seleziona tessuto, bottone, stile risvolto, monogramma. Ci sono 10.000 combinazioni. Shopify Variants supporta un massimo di 100 varianti. Soluzione monolite: impossibile. App hackerate. Soluzione senza testa: Costruiamo un’interfaccia React personalizzata. Contiene lo stato delle selezioni. Genera un’anteprima 3D dinamica. Quando l’utente fa clic su “Aggiungi al carrello”, creiamo un “Articolo personalizzato” tramite l’API Shopify con attributi di metadati specifici. Il backend non si preoccupa della complessità visiva. Il frontend se ne occupa.

La tassa sulla complessità

Senza testa non è libero. In un Monolito, “Aggiungi al carrello” funziona e basta. In Headless, devi scrivere la chiamata di recupero, gestire lo stato di caricamento, gestire lo stato di errore, gestire l’aggiornamento ottimistico dell’interfaccia utente. Possiedi la complessità. Compromesso: funzionalità Improve richiedono un elevato impegno ingegneristico. NON andare senza testa se:

Hai entrate <1 milione di dollari.
Non hai un team di sviluppatori.
Un tema standard è “Abbastanza buono”.

Il punto di vista dello scettico

“È troppo ingegnerizzato. Il mio tema si converte bene.” Contropunto: I temi vengono convertiti bene in beni standard. Ma se vuoi il “Caricamento istantaneo delle pagine” (Core Web Vitals), i temi faticano. I temi caricano 50 plugin jQuery. Headless carica esattamente il JS che hai scritto. Velocità = Conversione. I siti senza testa sono spesso il 50% più veloci dei monoliti.

Domande frequenti

D: E per quanto riguarda il pagamento? R: Di solito, manteniamo il checkout sulla piattaforma (ad esempio, reindirizzamo a checkout.shopify.com). Ricostruire Checkout è rischioso (conformità PCI, logica fiscale, regole di spedizione). Shopify scoraggia esplicitamente i checkout personalizzati a meno che tu non sia Shopify Plus.

D: La SEO è più difficile? R: Una volta era (rendering lato client). Con il Server Side Rendering (SSR) in Next.js/Remix, in realtà è migliore di Monoliths perché hai il pieno controllo sui metadati e sulla struttura HTML semantica.

10. Il livello API Gateway

Se disponi di 10 microservizi, il tuo frontend non dovrebbe comunicare con 10 API. Si occupa dell’inferno CORS e della gestione delle chiavi. Inseriamo un API Gateway (BFF - Backend for Frontend). Di solito un server GraphQL leggero (Apollo Server o funzione Edge specializzata). Aggrega le 10 API in Uno schema. Frontend: query { prodotto { prezzo, recensioni, disponibilità } }. Gateway: recupera prezzo (Shopify), recensioni (Yotpo), disponibilità (ERP) in parallelo. Semplifica drasticamente la logica del Client.

11. Gestione delle prestazioni di cataloghi di grandi dimensioni

“Abbiamo 100.000 prodotti. La realizzazione del sito statico richiede 4 ore.” Questa è la trappola “Build Time” di Gatsby/Next.js SSG. Soluzione: ISR (Rigenerazione Statica Incrementale).

Creare i primi 1000 prodotti al momento della distribuzione (percorso critico).
Il prodotto 1001 è “Non costruito”.
L’utente visita il prodotto 1001.
Il server lo crea su richiesta (impiega 200 ms) e lo memorizza nella cache.
L’utente successivo ottiene la versione memorizzata nella cache (istantanea). Ciò mantiene rapidi i tempi di creazione (5 minuti) supportando allo stesso tempo infiniti cataloghi.

12. Conclusione

Headless è la separazione delle preoccupazioni applicata alla logica aziendale. Permette al team di marketing (utilizzando il CMS) e al team di ingegneria (utilizzando React) di muoversi alla propria velocità. È l’architettura del web moderno.

Bloccato in un modello?

Se il tuo marchio ha superato i limiti dei temi standard, Maison Code può migrarti verso un’architettura headless. Costruiamo vetrine personalizzate che uniscono storia e vendite.

Temi Shopify ormai cresciuti?

Realizziamo soluzioni Headless Commerce utilizzando Next.js/Hydrogen per offrire esperienze di acquisto personalizzate e ad alta velocità. Assumi i nostri architetti.