Blog: Come ho realizzato la mia homepage

Negli ultimi tempi mi sono dedicato allo studio e alla ricerca di nuove soluzioni e architetture per realizzare un sito web, imbattendomi in applicazioni definite No-Code APP e Headless CMS.

Dopo alcuni test e approfondimenti, ho deciso di iniziare a costruire la mia home page, secondo i seguenti requisiti:

Memorizzare i vari contenuti su un database installato solo nel mio ambiente di sviluppo locale
Rapido aggiornamento e creazione di nuovi contenuti
Generazione di pagine web statiche in fase di pre-release
Utilizzo di React per l'implementazione del frontend
Tecnologia serverless
Pubblicazione su hosting gratuito, non ho bisogno di gestire grandi flussi di visitatori
SEO-friendly

Prima di tutto avevo bisogno di organizzare i contenuti in un database (uno a scelta tra PostgreSQL, MariaDB o SQLite), senza voler utilizzare CMS (come Wordpress), ma che mi consentisse, senza necessita' di programmazione, di:

Aggiornare schema e dati del database tramite un'interfaccia utente (da sviluppatore, voglio dedicare il mio tempo allo studio e progettazione di nuove tecnologie, senza re-inventarmi l'acqua calda)
CRUD esposto tramite REST Webservices (o GraphQL)

Dopo alcune ricerche, la scelta riguardava 2 HeadlessCMS:

Sono entrambi opensource, offrono un'interfaccia utente per modellare lo schema e i dati del database ed espongono CRUD tramite l'API REST. Nella fase iniziale in cui ho messo alla prova i 2 strumenti, ho deciso di utilizzare Directus (l'interfaccia di amministrazione era migliore, piu' stabile - almeno al momento in cui ho eseguito i test - e più manutenibile in Docker).

L'adozione di Directus mi ha permesso di dedicarmi esclusivamente al frontend, il CMS è formidabile e mi permette di gestire da zero un intero database e organizzarlo secondo necessità, configurando le relazioni tra le tabelle e offrendo un potente interfaccia ADMIN. Fornisce anche la gestione multilingua grazie alla quale sono stato in grado di organizzare i contenuti internazionali in modo molto comodo. Con un prodotto così ben organizzato, in grado di offrire anche supporto per l'archiviazione di risorse (come immagini e video), ho studiato le API esposte tramite REST Webservice, trovando questo metodo di implementazione davvero vantaggioso. In pochi passaggi, lo stack di backend necessario per gestire fruire i contenuti dell'homepage era completo.

A questo punto mi sono dovuto concentrare sul frontend cercando un prodotto che mi permettesse di generare pagine statiche partendo dai contenuti disponibili nel mio ambiente di sviluppo estratti tramite chiamate HTTP offerte da Directus stesso

Date le mie competenze in ReactJS e l'estrema comodità e semplicità d'uso, cercavo qualcosa che mi permettesse di organizzare le mie pagine utilizzando Web Components per "aggregare" i vari building block di cui è composta una home page. Dopo aver seguito alcuni corsi di Michele Riva, a Firenze, ho deciso di provare NextJS.

Questo framework offre varie tecniche di rendering, soddisfando le mie esigenze. In particolare, avevo bisogno del suo motore per la SSG (Static Site Generation) in modo che il prodotto finale potesse essere composto da semplici pagine HTML SEO-friendly.

NextJS offre 4 tipi di rendering: CSR (Client Side Rendering), SSR (Server Side Rendering), SSG (Static Site Generation) e ISR (Incremental Site Re-generation)

Ho iniziato a comporre il frontend costruendo i vari pezzi del puzzle (Web Components) utilizzando il comodo server di sviluppo incluso in NextJS. In questo modo ho sviluppato le interfacce necessarie, seguendo gli standard offerti da NextJS e configurando l'internazionalizzazione come spiegato nelle sue pagine di documentazione.

Lo sviluppo della pagina web era finalmente completo e la versione compilata si componeva solamente di pagine HTML e risorse pubbliche

Da ultimo, dovevo gestire il deployment della versione compilata, escludendo il server di sviluppo NextJS, servendo staticamente le pagine HTML prodotte ed effettuando un re-deploy per aggiornare eventuali contenuti modificati.

La mia esigenza era quella di utilizzare un servizio di hosting gratuito in grado di servire queste risorse statiche.

Dopo un po' di ricerche, i contendenti erano:

Vercel, proprietario e manutentore del framework NextJS
Netlify, molto famoso e utilizzato, ma senza alcuna esperienza personale
Render, noto perché lo utilizzo come hosting per altri software grazie al suo piano gratuito (un valido successore di Heroku, oramai utilizzabile solo a pagamento)

Prendo la strada di Vercel, perché offriva la funzionalità di hosting per le pagine in modalita' SSG, SSR o CSR, permettendomi di generare la prebuild sul mio ambiente locale, pubblicando cosi' solo il prodotto finale . L'ho scelto anche perché essendo il manutentore ufficiale del framework NextJS, speravo in una perfetta integrazione. La soluzione si e' dimostrata vincente e in pochi minuti sono riuscito a pubblicare online la versione DEV della homepage.

Vercel offre lo sviluppo DEV e PROD, consentendo agli sviluppatori di testare il loro sviluppo senza modificare la versione di produzione

Urrà! La mia homepage è stata completata, aggiornabile e raggiungibile sul Web senza costi di hosting. Tutti gli obiettivi sono stati completati senza scrivere tonnellate di righe di codice!!