INGEGNERIA COMPOSABLE COMMERCE
Headless Commerce
Hydrogen, Remix, Next.js + architettura composable MACH per massimizzare performance, flessibilità e ownership — il sistema operativo commerce moderno che disaccoppia frontend e backend.
Headless non è più 'separare il frontend'; è l'operazione composable in cui frontend + commerce engine + CMS + search + payment + identity vengono scelti best-in-class secondo i principi MACH (Microservices + API-first + Cloud-native + Headless) e composti sull'edge.
L'e-commerce 2026 vive sotto tre pressioni: i sistemi di temi monolitici hanno raggiunto il limite di velocità + flessibilità, l'edge runtime (Cloudflare Workers, Vercel Edge, Shopify Oxygen) è diventato il principale livello di distribuzione, React Server Components + streaming SSR hanno portato il TTFB dai secondi ai centinaia di millisecondi. La maggior parte dei brand pensa ancora che 'hydrogen = solo Shopify' e non valuta lo stack composable engine + Next.js + Sanity / Contentful + Algolia tipo commercetools / BigCommerce / Saleor. L'operazione headless di Roibase si fonda su sei principi.
METODOLOGIA
Operazione composable commerce su 6 layer
Assess → Architect → Compose → Migrate → Launch → Observe. Ogni layer viene consegnato con deliverable + ADR + SLA.
01
ASSESS
Stack attuale (monolite/temi, app, CDN), baseline di performance, rischio SEO, costo operativo, valutazione della capacità del team.
02
ARCHITECT
Architettura MACH, shortlist vendor (engine/CMS/search/payment/identity), strategia edge, documenti ADR, RFP + POC.
03
COMPOSE
Framework (Hydrogen / Next.js), integrazione del backend composable, GraphQL gateway, event bus (webhook + queue), feature flag.
04
MIGRATE
ETL dei dati (catalog/customer/order/content), mapping 301 + hreflang + sitemap, parità di staging, smoke test feature-complete.
05
LAUNCH
Rollout canary, launch gestito da feature flag, RUM + Sentry, stress test BFCM-ready, on-call nel weekend + war room.
06
OBSERVE
Monitoraggio SLO/SLI, QBR mensile sulle performance, rank monitoring SEO, cost review, aggiornamento ADR, runbook + formazione + handoff.
— CONFRONTO
Tema monolitico vs headless template-only vs composable commerce Roibase
La differenza dei tre approcci su performance, flessibilità, vendor lock-in, SEO + TCO.
| Dimensione | Tema monolitico | Headless template-only | Composable commerce Roibase |
|---|---|---|---|
| Architettura | Monolite unico | Template + backend unico | MACH + composable + edge |
| Flessibilità del vendor | Lock-in di piattaforma | Lock-in dell'engine | Selezione best-of-breed (per ogni layer) |
| Edge runtime | Assente | Parziale | CF Workers / Vercel Edge / Oxygen |
| Performance (LCP) | 2,5-4,5s | 2,0-2,8s | < 1,5s baseline + RUM |
| Content + CMS | CMS di piattaforma (limitato) | CMS unico | Sanity/Contentful/Storyblok best-fit |
| Search | Search nativa | Elasticsearch/Algolia base | Algolia/Typesense/Coveo + AI relevance |
| SEO | Dipendente dal tema | SPA rischiosa | Ingegneria SSR + schema + 301 + hreflang |
| TCO al 24° mese | Basso ma con debito tecnico | Medio + rischio di vendor unico | Medio + ownership + flessibilità + velocità |
PROOF
Outcomes, measured
75p mobile; dopo migrazione headless + edge runtime.
Media a 6 mesi dopo performance + streaming SSR + edge cache.
Al 12° mese dopo SEO preservation + schema + hreflang + Core Web Vitals in zona verde.
CDN globale Cloudflare Workers / Vercel Edge / Shopify Oxygen.
Dopo strategia ISR + partial prerendering + edge cache.
Engine + CMS + search + identity — ognuno iterabile separatamente.
WHAT WE DO
Engagement scope
Every offering is an outcome-based work package. Roibase blends strategy and execution inside a single team — no hand-offs.
Shopify Hydrogen + Oxygen
React Server Components + Remix + streaming SSR + edge deploy (Oxygen); Storefront API + Customer Account API + Shopify CDN.
Next.js + App Router + RSC
Server components + streaming + partial prerendering (Next 15) + Turbopack; deployment su Vercel Edge + ISR + SWR.
Commerce engine composable
commercetools / Saleor / BigCommerce / Shopify Storefront API; scelta dell'engine best-fit + GraphQL + webhook + flusso event-driven.
Integrazione headless CMS
Sanity, Contentful, Storyblok, Hygraph, Strapi; content model, preview mode, editorial workflow + live preview.
Search + merchandising
Algolia / Typesense / Coveo / MeiliSearch; instant search, federated search, AI relevance tuning, regole di merchandising.
Edge caching + ISR + SWR
Cloudflare Workers + KV/R2 / Vercel Edge / Oxygen; stale-while-revalidate, incremental static regeneration, edge middleware.
Ingegneria Core Web Vitals
Budget LCP < 1,5s / INP < 200ms / CLS < 0,05; font preload + image optimization + critical CSS + bundle splitting + RUM.
Identity + payment + subscription
Auth0 / Clerk / Supabase Auth + Stripe / Adyen + Recharge / Bold; passkey + SCA + 3DS2 + Apple/Google Pay.
Playbook di migrazione
Da Magento / WooCommerce / Shopify legacy / BigCommerce a headless; mapping 301, parità di feature, staging/canary, weekend di go-live.
A/B + feature flags + observability
GrowthBook / Statsig / LaunchDarkly + Sentry / Datadog + OpenTelemetry; rollout canary + rollback + metric tree SLO/SLI.
— VANTAGGI
Il cambiamento concreto della tua infrastruttura commerce
Quando edge runtime + composable + performance + SEO preservation + observability sono integrati, il ROI non resta legato a una sola metrica.
La velocità cresce in modo drammatico
Streaming SSR + edge runtime + RSC dimezzano l'LCP; conversione mobile e Core Web Vitals diventano verdi.
Il conversion cresce
Velocità + personalizzazione + UX più flessibile abbassano il drop di funnel e il tasso di carrello abbandonato.
Il rank SEO si conserva e cresce
Grazie all'ingegneria SSR + schema.org + 301 + hreflang + sitemap il calo di migrazione dura 2-3 settimane, poi il rank cresce.
Si apre la flessibilità del vendor
Engine / CMS / search / identity sostituibili in ogni layer; vendor lock-in + pressione annuale sui prezzi diminuiscono.
La velocità di prodotto aumenta
Con feature flag + canary + ISR le nuove feature possono andare live ogni ora invece che ogni giorno; la velocità di sperimentazione cresce.
Il costo operativo cala
Le app appiccicate sopra il monolite vengono sostituite da servizi composable; con l'edge cache il carico sull'origin diminuisce e il costo infra si ottimizza.
DELIVERABLE
Cosa ottieni in ogni engagement headless
Lista fissa di deliverable nel pacchetto setup + 6 mesi di operations; nessuna sorpresa di costi extra.
Report di feasibility headless + ROI
Audit dello stack attuale, modello TCO, baseline di performance, rischio SEO, valutazione capacità team; 50-80 pagine.
Architettura MACH + documenti ADR
Decisioni vendor su engine + CMS + search + payment + identity + edge + CI/CD, ognuna in un ADR motivato.
Selezione del framework + POC
Matrice di scelta Hydrogen / Next.js / Remix / Nuxt + POC di 2-3 settimane + report di benchmark performance.
Setup del backend composable
Integrazione commercetools / Saleor / BC / Shopify Storefront API + GraphQL gateway + webhook + event bus.
Schema headless CMS
Content model Sanity / Contentful / Storyblok, preview mode, editorial workflow + live preview.
Search + merchandising
Setup Algolia / Typesense / Coveo + schema dell'index + AI relevance tuning + regole di merchandising.
Edge runtime + strategia di cache
Deploy Cloudflare Workers / Vercel Edge / Oxygen + KV/R2 + ISR + SWR + edge middleware.
Identity + payment + subscription
Integrazione Auth0 / Clerk / Supabase Auth + Stripe / Adyen + flusso compatibile passkey + SCA + 3DS2.
Pacchetto SEO preservation
Mapping 301, canonical, schema.org, hreflang, sitemap, robots, ITA (International Targeting); dashboard di rank monitoring.
Infrastruttura feature flag + A/B
GrowthBook / Statsig / LaunchDarkly + canary + kill switch + experiment metric tree.
Observability + SLO/SLI
Sentry / Datadog + OpenTelemetry + Lighthouse CI + RUM (SpeedCurve) + PagerDuty; runbook di incident.
Runbook + formazione + 3 mesi di supporto
Runbook di architecture + deploy + rollback + monitoring, sessioni di formazione del team, 90 giorni di supporto + on-call.
— PERIMETRO
Cosa facciamo, cosa non facciamo
Lo scope del composable commerce è scritto; previene sorprese e fatture aggiuntive.
Lo facciamo
- Architettura MACH + composable commerce + ADR
- Shopify Hydrogen + Oxygen (RSC + Remix)
- Next.js + App Router + RSC + Vercel Edge
- commercetools / Saleor / BC / Shopify Storefront API
- CMS headless Sanity / Contentful / Storyblok
- Search + merchandising Algolia / Typesense / Coveo
- Edge runtime (Cloudflare Workers / Vercel Edge / Oxygen)
- SEO preservation (301 / schema / hreflang / sitemap)
- Feature flag + canary + rollback + observability
- Integrazione identity + payment + subscription
- Ingegneria Core Web Vitals + RUM
- Runbook + formazione + 90 giorni di supporto + on-call
Non lo facciamo
- Sviluppo di temi monolitici Magento / WooCommerce (solo migrazione)
- Sviluppo core ERP / OMS / WMS (li integriamo)
- Gestione del budget pubblicitario (Acquisition è un engagement separato)
- Logistica fisica / magazzino / customs
- Processing carte di credito / ownership dello scope PCI (resta sul payment vendor)
- Processi regolatori banking / KYC / AML (con partner specializzati)
- Outsourcing del customer service (impostiamo gli strumenti, l'operatività resta al cliente)
- Fake review / traffico bot / manipolazione artificiale della velocità
HOW WE WORK
Setup + migrazione di 12-16 settimane, poi operations mensili
Settimana 1-2: assess + feasibility
Audit dello stack, baseline di performance, rischio SEO, modello TCO, capacità team + bozza ADR.
Settimana 3-4: architect + RFP/POC vendor
Architettura MACH, shortlist engine/CMS/search/payment/identity + RFP + POC di 2-3 settimane.
Settimana 5-6: compose + setup framework
Setup Hydrogen / Next.js, integrazione Storefront API / commerce engine, GraphQL gateway, deploy edge runtime.
Settimana 7: CMS + search + merchandising
Content model Sanity / Contentful, index Algolia / Typesense + relevance tuning, regole di merchandising.
Settimana 8: identity + payment + subscription
Auth0 / Clerk + Stripe / Adyen + Recharge + 3DS2 + passkey + accelerated checkout.
Settimana 9-10: ETL dati + mapping 301
ETL di catalog / customer / order / content, mapping URL, piano 301, hreflang + sitemap + schema.
Settimana 11-12: staging + canary + stress BFCM
Parità staging, smoke test, rollout canary, launch con feature flag, stress test BFCM + piano di war room.
Settimana 13+: go-live + observe + QBR + supporto
Playbook del weekend di go-live, RUM + Sentry + SLO/SLI, QBR mensile, runbook + formazione + 3 mesi di supporto.
— TOOLKIT
Strumenti che usiamo — vendor-agnostic ma scelta convinta
Scegliamo per ogni cliente quello adatto; manteniamo l'indipendenza non incassando commissioni.
FRAMEWORK & FRONTEND
COMMERCE & CMS
SEARCH & PERSONALIZATION
EDGE & OBSERVABILITY
QUESTIONS
Frequently asked
— GLOSSARIO
Concetti chiave del composable commerce
Linguaggio comune per i team di engineering, prodotto, operations e marketing.
- MACH
- Acronimo dei principi Microservices + API-first + Cloud-native + Headless; framework dell'architettura composable commerce, definito dalla MACH Alliance.
- Composable Commerce
- Architettura commerce composta scegliendo un vendor best-of-breed per ogni funzione invece di una piattaforma monolitica unica; engine + CMS + search + payment + identity sono servizi separati.
- Headless
- Disaccoppiamento via API tra frontend (presentation) e backend (commerce engine / CMS); permette al frontend di girare su qualunque framework + runtime.
- React Server Components (RSC)
- Modello di componenti renderizzati sul server, introdotto con React 18+, che non invia JS al client; Next.js App Router + Shopify Hydrogen lo usano nativamente, riducendo il costo di bundle + hydration.
- Streaming SSR
- Modello di render in cui l'HTML della pagina non viene inviato in un colpo solo, ma in flusso a partire dai pezzi pronti; TTFB e LCP scendono.
- Edge Runtime
- Runtime in cui il codice viene eseguito sul CDN node geograficamente più vicino all'utente; Cloudflare Workers, Vercel Edge, Shopify Oxygen sono esempi principali. Latency minima, coerenza globale.
- ISR (Incremental Static Regeneration)
- Rigenerazione in background, a intervalli o su trigger, di pagine costruite staticamente; unisce velocità statica e dati freschi.
- Stale-While-Revalidate (SWR)
- Strategia di cache HTTP; mostra all'utente contenuto stale in modo immediato mentre in background fetcha la versione fresca. Equilibrio tra velocità e freschezza.
- Storefront API
- GraphQL API pubblica di Shopify; permette a frontend headless / custom / app mobili di accedere ai dati di prodotto + collezione + carrello + checkout.
- commercetools
- Composable commerce engine; API-first + compatibile MACH, uno degli engine più usati negli scenari enterprise B2B + B2C. Ecosistema commercetools Frontend + Studio disponibile.
- ADR (Architecture Decision Record)
- Formato di documentazione che mette per iscritto contesto, opzioni, risultato e tradeoff di una decisione di architettura software; standard per le scelte vendor in uno stack composable.
- Feature Flag
- Switch di funzionalità accendibile/spegnibile a runtime, indipendente dal deploy del codice; usato in scenari di canary release, A/B test, kill switch; GrowthBook/Statsig/LaunchDarkly sono i tool principali.
- SSR (Server-Side Rendering)
- Renderizzare l'HTML sul server e inviarlo pronto al browser. Batte il CSR in SEO e LCP; modalità di default di framework come Nuxt 3, Next.js, Remix. A scala richiede edge caching e una strategia di hydration ragionata.
- CSR (Client-Side Rendering)
- Inviare un guscio HTML quasi vuoto + bundle JS e renderizzare nel browser. Modalità tipica delle SPA; first paint lento, SEO richiede prerendering aggiuntivo per route. LCP crolla con rete povera o device modesti.
- Edge Functions
- Layer di compute leggero che gira nel CDN stesso (Cloudflare Workers, Vercel Edge, AWS Lambda@Edge). Fa geo-routing, bucketing A/B, manipolazione header e auth in millisecondi senza tornare all'origin; cold start quasi nullo.
- CDN (Content Delivery Network)
- Rete che mette in cache contenuti statici (e sempre più dinamici) su nodi edge distribuiti geograficamente. Abbassa TTFB e LCP, protegge l'origin da DDoS e picchi di traffico. Cloudflare, Fastly, Akamai, AWS CloudFront — table stakes di ogni stack moderno.
— ALBERO DECISIONALE
L'operazione composable commerce è adatta a te?
Rispondi Sì/No a 4 domande; il risultato sarà chiaro.
01 / 04
Hai un GMV annuo di $2M+ o un'operazione B2B attiva?
Soglia minima per il ROI dell'investimento MACH + composable; per shop più piccoli OS 2.0 dà ROI più rapido.
— LET'S BEGIN
Cosa limita ogni settimana la velocità del frontend del tuo e-commerce?
Scansioniamo il tuo sito attuale e produciamo Web Vitals, strategia di cache, mappa di rischio SEO e modello ROI headless.