{"id":1389,"date":"2021-09-01T11:42:00","date_gmt":"2021-09-01T09:42:00","guid":{"rendered":"https:\/\/brentasoft.com\/blog\/headless-commerce-quando-conviene-2021\/"},"modified":"2021-09-01T11:42:00","modified_gmt":"2021-09-01T09:42:00","slug":"headless-commerce-quando-conviene-2021","status":"publish","type":"post","link":"https:\/\/brentasoft.com\/blog\/headless-commerce-quando-conviene-2021\/","title":{"rendered":"Headless commerce 2021: cosa \u00e8 e quando conviene per la tua PMI"},"content":{"rendered":"

Nel 2021 l’e-commerce italiano ha consolidato il salto dimensionale iniziato durante i lockdown del 2020: i consumatori comprano da smartphone e abbandonano un sito che impiega pi\u00f9 di tre secondi a caricare. Da maggio Google ha reso i Core Web Vitals<\/strong> un fattore di ranking ufficiale e questo ha spostato il problema della performance dalla scrivania del marketing a quella del CTO<\/strong>.<\/p>\n

Gran parte degli e-commerce PMI italiani gira ancora su piattaforme monolitiche come WooCommerce<\/strong> classico, Magento 2<\/strong> server-rendered o PrestaShop<\/strong>. Oggi il mobile vale il 65-75% delle visite e il 45-55% delle conversioni, ma queste architetture sono rimaste indietro: tema PHP che genera HTML, plugin che caricano CSS e JavaScript sincroni, LCP<\/strong> sopra i 4 secondi su rete 4G.<\/p>\n

Il termine headless commerce<\/strong> \u00e8 la risposta proposta da vendor e agenzie. La promessa: disaccoppiare frontend e backend, servire pagine pre-renderizzate da una CDN<\/strong> globale, ottenere performance native-like senza riscrivere il gestionale. Quanto \u00e8 vero? E ha senso per una PMI italiana sotto il milione di euro di fatturato online? Questa guida risponde con numeri, costi reali e una roadmap di migrazione in 90 giorni.<\/p>\n

\n

TL;DR \u2014 In sintesi:<\/strong> Headless commerce significa separare il frontend (un sito statico costruito con Next.js<\/strong>, Nuxt.js<\/strong> o Gatsby<\/strong> e servito da CDN<\/strong>) dal backend commerce (Shopify Plus<\/strong>, BigCommerce<\/strong>, Saleor<\/strong>, Commerce Layer<\/strong> o Magento via API<\/strong>). Si ottengono LCP<\/strong> sotto 1,5 secondi e omnichannel reale, ma il setup costa 40-150k\u20ac e richiede un team dev interno o un partner solido. Conviene a PMI con oltre 1M\u20ac di fatturato online, cataloghi sopra i 500 SKU e ambizioni mobile-first o B2B\/B2C multi-canale. Per progetti pi\u00f9 piccoli, ottimizzare WooCommerce o passare a Shopify standard resta la scelta razionale.<\/p>\n<\/div>\n

Cosa significa headless commerce<\/h2>\n

In un’architettura tradizionale, lo stesso software gestisce catalogo, carrello, pagamento e l’HTML che il browser vede. Tutto vive in un unico processo PHP o Java sullo stesso server. In un’architettura headless<\/strong>, il backend espone API<\/strong> REST o GraphQL<\/strong> e un frontend separato \u2014 costruito con Next.js<\/strong>, Nuxt.js<\/strong>, Gatsby<\/strong> o Hugo<\/strong> \u2014 consuma quelle API e genera l’HTML.<\/p>\n

La parola “headless” indica letteralmente “senza testa”: il commerce engine perde il suo frontend nativo. Quello che resta \u00e8 un servizio specializzato che gestisce prodotti, prezzi, ordini e magazzino via API<\/strong>. Il frontend pu\u00f2 essere un sito web, un’app iOS, un kiosk in negozio o un marketplace partner: ogni canale parla la stessa lingua con lo stesso backend.<\/p>\n

Il pattern JAMstack<\/h3>\n

Il pattern dominante nel 2021 si chiama JAMstack<\/strong>: JavaScript<\/strong> per l’interattivit\u00e0 lato client, API<\/strong> per i dati dinamici, Markup pre-generato a build time. Le pagine prodotto vengono compilate in HTML statico durante il deploy e servite da una CDN<\/strong> globale come Vercel, Netlify o Cloudflare Pages. Il browser scarica un file HTML gi\u00e0 pronto: nessun database da interrogare, nessun PHP da eseguire, latenze in millisecondi.<\/p>\n

Le tecniche moderne \u2014 SSG<\/strong> (Static Site Generation), ISR<\/strong> (Incremental Static Regeneration) introdotta da Next.js, SSR<\/strong> (Server-Side Rendering) e BFF<\/strong> (Backend For Frontend) \u2014 permettono di bilanciare freschezza dei dati e velocit\u00e0. Un catalogo di 1.000 prodotti viene pre-renderizzato in 20-40 secondi a build, e singole pagine possono essere rigenerate on-demand quando il prezzo cambia, senza ricostruire tutto il sito.<\/p>\n

Differenza con l’architettura monolitica<\/h2>\n

Un sito WooCommerce<\/strong> tradizionale funziona cos\u00ec: ogni richiesta passa da Apache o Nginx a PHP-FPM, che carica WordPress, esegue 30-80 query MySQL, applica filtri di plugin, renderizza il tema e restituisce HTML. Su un server condiviso, TTFB<\/strong> tipico \u00e8 800-1.500 ms; su un VPS ottimizzato con object cache Redis, si scende a 200-400 ms. Sotto i 100 ms \u00e8 praticamente impossibile senza full-page cache.<\/p>\n

Magento 2 ha lo stesso schema con pi\u00f9 strati: PHP, Varnish, MySQL, Elasticsearch, Redis. Funziona bene quando tutto \u00e8 cachato, ma il primo hit non in cache costa 1-3 secondi. Su mobile 4G l’LCP<\/strong> sfora i 4 secondi e Google penalizza nel ranking.<\/p>\n

Un sito headless servito da CDN<\/strong> parte da una situazione opposta: il file HTML \u00e8 gi\u00e0 sul nodo edge pi\u00f9 vicino all’utente. TTFB<\/strong> \u00e8 30-80 ms, LCP<\/strong> sotto 1,5 s \u00e8 la norma, CLS<\/strong> e FID<\/strong> (che nel 2021 era ancora la metrica di interattivit\u00e0 in produzione, mentre INP<\/strong> era in fase di preview) si gestiscono lato codice con lazy loading delle immagini e priorit\u00e0 di rendering.<\/p>\n

\"Codice<\/p>\n

Cosa cambia per il developer<\/h3>\n

Il team frontend smette di lavorare in PHP e passa a JavaScript o TypeScript. Lo stack tipico include React<\/strong> con Next.js<\/strong>, oppure Vue 3<\/strong> con Nuxt.js<\/strong>, oppure Gatsby<\/strong> per siti molto statici. Tailwind CSS<\/strong> 2.x \u00e8 lo standard utility-first; Apollo Client<\/strong> gestisce le query GraphQL<\/strong>. Il backend commerce continua a girare dov’era \u2014 Shopify, container Magento, VPS Saleor \u2014 interrogato solo via API<\/strong>.<\/p>\n

JAMstack: lo stack tipico nel 2021<\/h2>\n

Il framework frontend dominante \u00e8 Next.js<\/strong>, in versione 11 dal giugno 2021, con image optimization integrata e ISR<\/strong>. Nuxt.js<\/strong> 2.x copre l’ecosistema Vue, Gatsby<\/strong> 3.x resta forte per siti content-heavy. Astro<\/strong> \u00e8 uscito in preview ma non \u00e8 ancora maturo per la produzione e-commerce.<\/p>\n

Per il deploy dominano Vercel<\/strong> (gli stessi autori di Next.js) e Netlify<\/strong>: build automatica al push Git, CDN<\/strong> globale, preview deploy per branch, funzioni serverless. Costi: 0\u20ac per progetti piccoli, 20-25$\/mese per team, 200-500$\/mese per traffico medio (1-5 milioni di pageview).<\/p>\n

Per la ricerca prodotto, Algolia<\/strong> \u00e8 lo standard de facto: indicizza il catalogo via API<\/strong>, serve risultati in 20-40 ms, supporta filtri faccettati e typo-tolerance. Costo tipico: 50-300\u20ac\/mese per un e-commerce medio.<\/p>\n

Commerce engine: le scelte concrete del 2021<\/h2>\n

Il mercato dei backend commerce headless nel 2021 si divide fra SaaS commerciali e soluzioni open source. Ecco le opzioni principali da valutare:<\/p>\n