Headless is more (parte 4/4)
Dopo aver visto in dettaglio le caratteristiche ed i vantaggi di un CMS Headless, in questo ultimo articolo andiamo ad analizzare 3 possibili scenari di sviluppo.
3 scenari di sviluppo
Single Page Application senza pre-rendering
In questo scenario abbiamo un CMS Headless per la gestione dei contenuti e l’erogazione di API che vengono fruite da un’applicazione html, css e javascript su singola pagina. Questo significa che il browser scarica tutti gli asset ed un’unica pagina html vuota presente sul server, dopodiché, attraverso chiamate alle API e a funzioni javascript, l’utente potrà navigare tutte le sezioni/pagine, che verranno rappresentate dinamicamente dal browser.
Questa è una soluzione molto adatta ad applicativi che non hanno pagine pubbliche, in cui tutte le funzionalità sono erogate dopo aver fatto login. Il limite di questo approccio è tuttavia legato alla cattiva indicizzazione delle pagine nei motori di ricerca ed al fatto che le pagine possano impiegare un po’ di tempo ad essere costruite in quanto è necessario attendere la costruzione dell’html e la ricezione dei contenuti.
Single Page Application con pre-rendering
Questo tipo di applicazioni, anche chiamate “universali” o “isomorfe” , prevedono che l’applicazione non venga eseguita solo dal browser ma anche da un server che interpreta il codice javascript e pre-imposta le pagine ed il routing delle varie sezioni.
Questo tipo di soluzione migliora sensibilmente le performance in quanto il server funge di fatto da middleware e, oltre ad alleggerire il cliente di alcune operazioni, fornisce i contenuti che ha già richiesto in precedenza al CMS salvandoli in una sua cache. Inoltre i vari bot dei motori riescono a navigare le pagine senza alcun problema, quindi dal punto di vista SEO ci sono grandi vantaggi. Questa soluzione è consigliata per siti con aree pubbliche e private e con diverse funzionalità che possono essere svolte dal middleware.
Static Site Generation
Questo scenario prevede la generazione automatica di pagine statiche in fase di deploy del sito e in fase di aggiornamento dei contenuti.
Ad esempio, se scriviamo un nuovo post su un blog, al salvataggio del contenuto viene lanciata una procedura (CD/CI) che genera la pagina del singolo post e rigenera tutte le altre pagine (home, pagina di categoria, tag, …) dove l’anteprima di questo post è presente e quindi effettua un deploy totale o parziale dell’applicativo.
Questa soluzione è sicuramente la più performante, in quanto ogni pagina del nostro applicativo è completamente statica.
D’altro canto non è possibile staticizzare tutto, ad esempio: la funzione di ricerca, la login e l’invio di mail sono tutte funzionalità che devono essere integrate utilizzando dei servizi dedicati.
Conclusioni
L’evoluzione dei software e delle piattaforme online ha reso le esperienze digitali sempre più articolate ed immersive, proponendo funzionalità di facile fruizione che nascondono tuttavia una grande complessità architetturale e tecnica.
Inoltre le persone, utilizzando servizi sempre più evoluti, alzano costantemente i loro standard e le loro aspettative dando per scontato che l’esperienza sia sempre al top. Per esempio, è altamente improbabile essere soddisfatti di un’esperienza di ricerca che non preveda la correzione degli errori di battitura, dopo aver utilizzato quotidianamente Google.
Diventa quindi di cruciale importanza trovare un modo per scomporre i sistemi complessi in pezzi più piccoli e di facile comprensione, andando a sezionare nel dettaglio funzionalità ed interfacce.
In questo tipo di scenario sviluppare con architettura a microservizi, separare funzionalità da interfaccia, mettere al sicuro i dati ed integrare servizi già esistenti può aiutarci a realizzare delle esperienze dall’ alto contenuto tecnologico, altamente soddisfacenti e in linea con le aspettative dei nostri interlocutori.
Se ti sei perso i primi articoli, qui di seguito trovi tutto!
Headless is more (parte 1) — Differenza tra Monolite e Headless technology
Headless is more (parte 2) — CMS Headless e 3 vantaggi chiave
Headless is more (parte 3) — 5 Hosting per sviluppare la Headless technology
Headless is more (parte 4) — 3 scenari di sviluppo
