> ## Content Index > Fetch the complete content index at: https://www.alessiopomaro.it/llms.txt > Use this file to discover other available public pages before exploring further. # CMS Headless e JAMstack: un nuovo paradigma all'insegna delle prestazioni - URL: https://www.alessiopomaro.it/cms-headless-jamstack/ - Published: 2021-10-14T06:00:00.000Z - Updated: 2021-10-14T05:59:59.000Z - Description: L'architettura JAMstack è stata creata per rendere il web più veloce, più sicuro e più facile da scalare. E l'accoppiata tra tale architettura ed un CMS Headless, probabilmente rappresenta il futuro dello sviluppo web, verso la creazione di esperienze utente straordinarie. - Author: Alessio Pomaro - Tags: Sviluppo WEB, SEO Recentemente, in questo blog, ho parlato di **[CMS Headless](https://www.alessiopomaro.it/digital-headless-cms-ecommerce/)** ed architetture disaccoppiate, e in tale ambito è inevitabile l'incontro con "***JAMstack***" (concetto già incontrato nel post su **[Gatsby](https://www.alessiopomaro.it/gatsby-sviluppo-web/)**). Per chi è abituato a creare siti web con piattaforme "*all-in-one*", il mondo degli **stack "*API-first*"** e la terminologia utilizzata per descriverli possono essere difficili da affrontare. Lo scopo di questo articolo, è proprio quello di esplorare il paradigma in maniera semplice. Il termine "***JAMstack***" è stato coniato nel 2015 da **[Matt Biilmann](https://twitter.com/biilmann?ref=alessiopomaro.it)**, co-fondatore e CEO di **[Netlify](https://www.netlify.com/?ref=alessiopomaro.it)** per descrivere il nuovo approccio che include proprio strumenti come i **CMS Headless** e sistemi disaccoppiati. Da allora, l'ecosistema **JAMstack** è cresciuto e si è evoluto, diventando l'architettura moderna che gli sviluppatori stanno adottando per creare **esperienze web sempre migliori**. Oggi ci sono oltre 1 milione di sviluppatori che implementano siti web basati su JAMstack su Netlify e migliaia di team aziendali che utilizzano JAMstack per i suoi vantaggi in termini di **velocità**, **sicurezza** e **facilità di sviluppo**. In questo post, vedremo cos'è JAMstack, dove si inseriscono i CMS Headless, e perché possono dare agli utenti delle esperienze straordinarie. ## Cos'è JAMstack? **JAMstack** è un'architettura in cui la UI (*user interface*) viene compilata, il front-end viene disaccoppiato e i dati vengono inseriti in base alle esigenze. "***JAM***" deriva dai suoi tre componenti: - JavaScript, - API e - Markup. Tali componenti vengono utilizzati per creare siti web super veloci, sicuri e SEO friendly. I JAMstack vengono utilizzati per **compilare il front-end e servire risorse statiche all'edge**. Eventuali dati aggiuntivi vengono inseriti in base alle esigenze tramite le API. Questo modo di concepire i progetti, che sfrutta le potenzialità in continua espansione di browser e dispositivi, in passato non era conveniente, ma grazie alla maturazione delle API e di JavaScript e all'aumento di [framework SPA](https://it.wikipedia.org/wiki/Single-page%5Fapplication?ref=alessiopomaro.it) (*Single-Page Application*) come **Angular** e **React**, sta diventano potentissimo. ![Un confronto tra un'architettura tradizionale e JAMstack - Fonte: bloomreach.com](https://storage.ghost.io/c/d7/3a/d73a3886-5e95-4e08-9255-a08eb51bb37b/content/images/2021/10/architettura-jamstack.webp) Un confronto tra un'architettura tradizionale e JAMstack - Fonte: bloomreach.com ## I principi di JAMstack Ci sono due principi fondamentali alla base di **JAMstack**: il ****[pre-rendering](https://jamstack.org/glossary/pre-render?ref=alessiopomaro.it)** e il ****[disaccoppiamento](https://jamstack.org/glossary/decoupling?ref=alessiopomaro.it)**. Li vediamo in dettaglio. ### Pre-rendering Con JAMstack, il front-end è "*precostruito*" in pagine statiche e risorse altamente ottimizzate. Questo processo di **pre-rendering** si traduce in siti web che possono essere serviti direttamente da una CDN, riducendo il costo, la complessità e migliorando la sicurezza dei server. Esistono moltissimi sistemi per la generazione di siti web statici, come **[Gatsby](https://www.gatsbyjs.com/?ref=alessiopomaro.it)**, **[Hugo](https://gohugo.io/?ref=alessiopomaro.it)** (di cui ho già parlato in [questo post](https://www.alessiopomaro.it/scelte-john-mueller-blog-personale/)), **[Jekyll](https://jekyllrb.com/?ref=alessiopomaro.it)**, **[Eleventy](https://www.11ty.dev/?ref=alessiopomaro.it)** e **[Next.js](https://nextjs.org/?ref=alessiopomaro.it)**. Per questo motivo, moltissimi sviluppatori hanno già familiarità con gli strumenti necessari per operare con JAMstack. Il pre-rendering porta a miglioramenti nelle **prestazioni del sito**, nelle metriche di **uptime** e nei **Core Web Vitals**, e semplifica anche la **scalabilità**. ### Disaccoppiamento Il disaccoppiamento è il processo di separazione tra sistemi o servizi. **Disaccoppiando i servizi necessari per far funzionare un sito web, come il CMS e il back-end, o il database e il front-end, si possono creare sistemi estremamente flessibili**. Allo stesso tempo, diventa semplice l'utilizzo di elementi di terze parti, evitando di sviluppare applicazioni per ogni funzionalità del sito web. La fiorente "**[API economy](https://jamstack.org/glossary/api-economy/?ref=alessiopomaro.it)**" è diventata un fattore abilitante significativo per i siti JAMstack. La capacità di sfruttare prodotti e servizi specifici per diversi ambiti tramite API ha consentito ai team di creare applicazioni molto più complesse e performanti con un effort relativamente basso. ## Che cos'è un CMS Headless? Un **CMS Headless** è un sistema di gestione dei contenuti disaccoppiato dal flusso di restituzione e gestione delle visualizzazioni e dei template che ottengono gli utenti come risposta alle richieste. A differenza di un'architettura tradizionale o "*accoppiata*" (*un monolite in cui il back-end è profondamente integrato con il front-end*) in un CMS Headless, **front-end e back-end sono sistemi completamente separati**. Il termine "*headless*" deriva proprio dal disaccoppiamento tra la "*testa*" (*il front-end*) e il corpo (*il back-end*). Grazie a questo, il CMS può focalizzarsi sulla creazione di contenuti ricchi e potenti e su flussi di lavoro strutturati, **senza essere vincolati dalla visualizzazione**. Sebbene sia uno schema estremamente comune, **i siti JAMstack non hanno sempre un CMS Headless**. Alcuni team scelgono di aggiornare i contenuti direttamente nei **file di markdown**, utilizzando dei framework JavaScript. Tuttavia, l'uso di un CMS Headless rappresenta un grande plus in ambito JAMstack. ## Perché scegliere un CMS Headless + JAMstack? Ci sono molti vantaggi in un approccio "*headless*". Provo a riassumere i principali. ### 1) Miglioramento dei flussi di sviluppo e modifica dei contenuti Non solo un approccio JAMstack disaccoppia il front-end dal back-end, ma aiuta i team a disaccoppiare i loro flussi di lavoro. Con una piattaforma "***all-in-one***", tutte le modifiche ai contenuti del sito devono essere riviste e implementate da un webmaster. Con un CMS Headless, tutti processi diventano indipendenti. ### 2) Miglioramento delle prestazioni e della UX I siti JAMstack sono incredibilmente performanti (*prova a navigare questo sito web*). Il grandissimo lavoro svolto dagli sviluppatori che si occupano del front-end per offrire grandi prestazioni può essere compromesso da un server inefficiente o da un back-end non performante. Invece di aspettare che le pagine vengano create "*on the fly*", **i siti web JAMstack vengono generati al momento della distribuzione**. Per raggiungere le massime prestazioni, inoltre, le pagine possono essere servite da una CDN con servizi specifici come **[Netlify Edge](https://www.netlify.com/products/edge/?ref=alessiopomaro.it)** o **[Cloudflare Pages](https://pages.cloudflare.com/?ref=alessiopomaro.it)**, che le distribuiscono globalmente con pre-rendering automatizzati. Inutile dire che l'aumento delle prestazioni va migliorare la **User eXperience** e di conseguenza la **SEO** dei siti web, sia relativamente alle metriche di [**Page Experience**](https://developers.google.com/search/docs/advanced/experience/page-experience?hl=it&ref=alessiopomaro.it), sia da un punto di vista di **crawl budget**. ### 3) Aumento della sicurezza Con i processi lato server pilotati dalle API attraverso "*microservizi*", le aree di superficie per gli attacchi sono notevolmente ridotte. ### 4) Ridimensionamento dei costi e della complessità Inizialmente, in sistema di questo tipo, avrà le caratteristiche contrarie rispetto al titolo. Infatti si tratta di **sistemi che implicano una progettazione ed uno sviluppo di un certo livello**. A regime, però, considerando i punti analizzati in precedenza, e di conseguenza anche il miglioramento dell'esperienza degli utenti, possono rappresentare **un enorme plus per i brand**. > Non dimentichiamo, inoltre, che i sistemi cloud che si stanno affermando, sono caratterizzati da un **rapporto prestazioni/prezzo/mantenimento** difficilmente raggiungibili dagli stack tradizionali. ### 5) Miglioramento della collaborazione I progetti web rappresentano un lavoro di squadra. JAMstack è basato su [**Git**](https://git-scm.com/?ref=alessiopomaro.it) e, con strumenti collaborativi ed integrazioni con i più diffusi strumenti di gestione dei progetti, i team possono creare uno stretto **ciclo di feedback** che si inserisce nei flussi di lavoro degli sviluppatori. --- ### Conclusioni Queste caratteristiche portano vantaggi in tutti i settori, ma credo che i progetti articolati come l'**e-commerce**, o comunque quelli in cui c'è l'esigenza di integrazioni o di raggiungere diversi interaction point con gli utenti, saranno i più coinvolti in questa evoluzione. Prima di chiudere il post, vorrei fare due piccoli approfondimenti relativi all'**e-commerce** e ad una caratteristica interessante di **Next.JS**. --- ## Headless Commerce + JAMstack: esempi Nel video che segue puoi vedere l'esperienza di navigazione di un sito web di **e-commerce** realizzata attraverso Gatsby e Next.JS. Un esempio di esperienza di e-commerce con JAMstack Come vedi, le prestazioni regalano un'esperienza di navigazione straordinaria. ## Next.JS e il rendering incrementale **Next.JS** permette di contare su strategie di **rendering lato server** coesistenti anche nello stesso progetto. Oltre a quelle classiche, però, ne ha una "*ibrida*", ovvero la "**[Incremental Static Regeneration](https://vercel.com/docs/concepts/next.js/incremental-static-regeneration?ref=alessiopomaro.it)**" (ISR). Nel video che segue, nei primi 2 minuti, vengono spiegate proprio le possibilità di rendering e l'ISR. Come funzione Next.JS? Un video per iniziare Prima di tutto, ISR, permette agli sviluppatori e agli editor di utilizzare la **generazione statica delle pagine** senza dover ricostruire l'intero sito web, andando a modulare il numero di pagine che vengono generate in fase di pubblicazione e quello, invece, che verrà processato in seguito alle richieste. ![Incremental Static Regeneration (ISR) di Next.JS: la generazione modulare delle pagine statiche - Fonte: vercel.com](https://storage.ghost.io/c/d7/3a/d73a3886-5e95-4e08-9255-a08eb51bb37b/content/images/2021/10/isr-cache-nextjs-generazione-statica.webp) ISR di Next.JS: la generazione modulare delle pagine statiche - Fonte: vercel.com Inoltre, specificando un "**revalidate time**" (*anche per ogni pagina*), è possibile far sì che l'utente riceva sempre la **versione statica** della pagina, la quale si rigenererà in background dopo il tempo impostato. Lo schema che segue descrive il processo. ![Il funzionamento dell'ISR (Incremental Static Regeneration) per Next.JS - Fonte: vercel.com](https://storage.ghost.io/c/d7/3a/d73a3886-5e95-4e08-9255-a08eb51bb37b/content/images/2021/10/rigenerazione-statica-incrementale-cache-nextjs.webp) Il funzionamento dell'ISR (Incremental Static Regeneration) per Next.JS - Fonte: vercel.com L'utente, in questo modo, avrà un'**esperienza di navigazione velocissima**, e come contro, al massimo, un ritardo di qualche secondo nell'aggiornamento delle informazioni. --- > **Buon viaggio verso un'esperienza di navigazione "supersonica".** --- ### Per approfondire [Il mondo digital è sempre più “headless”Il concetto di “architettura headless” sta diventando centrale nel mondo dello sviluppo in ambito web e digital in genere. Ma cosa significa? Quali sono le soluzioni a disposizione? Scopriamolo.![](https://www.alessiopomaro.it/favicon.png)Alessio PomaroAlessio Pomaro![](https://storage.ghost.io/c/d7/3a/d73a3886-5e95-4e08-9255-a08eb51bb37b/content/images/2021/09/sistemi-headless-cms-1.jpg)](https://www.alessiopomaro.it/digital-headless-cms-ecommerce/) [Cos’è Gatsby? Un esempio di quello che serve oggi nello sviluppo web!Nello sviluppo web di oggi sono necessari 3 ingredienti: prestazioni, integrazione, velocità di deployment. Gatsby è una risposta interessante a queste necessità. Scopriamo di cosa si tratta.![](https://www.alessiopomaro.it/favicon.png)Alessio PomaroAlessio Pomaro![](https://storage.ghost.io/c/d7/3a/d73a3886-5e95-4e08-9255-a08eb51bb37b/content/images/2021/08/gatsby-sviluppo-web-1.jpg)](https://www.alessiopomaro.it/gatsby-sviluppo-web/)