CMS Headless e JAMstack: un nuovo paradigma all'insegna delle prestazioni
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.
Recentemente, in questo blog, ho parlato di CMS Headless ed architetture disaccoppiate, e in tale ambito è inevitabile l'incontro con "JAMstack" (concetto già incontrato nel post su Gatsby).
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, co-fondatore e CEO di Netlify 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 (Single-Page Application) come Angular e React, sta diventano potentissimo.
I principi di JAMstack
Ci sono due principi fondamentali alla base di JAMstack: il pre-rendering e il disaccoppiamento. 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, Hugo (di cui ho già parlato in questo post), Jekyll, Eleventy e Next.js. 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" è 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 o Cloudflare Pages, 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, 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 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.
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" (ISR).
Nel video che segue, nei primi 2 minuti, vengono spiegate proprio le possibilità di rendering e l'ISR.
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.
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.
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
Alessio Pomaro
Alessio Pomaro