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, che aveva come target:
- Memorizzare i vari contenuti su un database installato solo nel mio ambiente di sviluppo locale
- Rilascio di contenuti aggiornati e aggiornabili
- Utilizzo di React per l'implementazione del frontend
- Ambiente senza server
- 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), cercando qualcosa che potesse soddisfare questi requisiti:
- Lo schema e i dati del database devono essere aggiornabili tramite un'interfaccia utente (non voglio scrivere queries molto banali visti i livelli di astrazione odierni)
- CRUD esposto tramite REST Webservices (o GraphQL)

 Dopo alcune ricerche, dovevo scegliere tra 2 HeadlessCMS:
- [Directus](https://directus.io/)
- [STRAPI](https://strapi.io/)

Sono entrambi opensource, offrono un'interfaccia utente per modellare lo schema e i dati del database ed espongono CRUD tramite l'API REST. Dopo aver testato ciascuno di essi, 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](https://directus.io/) 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 con campi di modifica digitati. Fornisce anche la gestione delle traduzioni grazie alla quale sono stato in grado di organizzare i contenuti internazionali in modo molto comodo.
Con un database così 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 solo 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](https://nextjs.org/). 

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 necesarie, 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 composta solo da 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 paio di ricerche, devo fare una scelta tra:
- [Vercel](https://vercel.com/), proprietario e manutentore di NextJS Framework
- [Netlify](https://www.netlify.com/), dopo aver visto un paio di siti di sviluppatori ospitati su di esso, ma senza alcuna esperienza personale
- [Render](https://render.com/), noto perché ospitavo altri software utilizzando il suo piano di hosting gratuito (dopo che Heroku ha chiuso i suoi piani gratuiti)

Prendo la strada di [Vercel](https://vercel.com/), 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 ufficial 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](https://jacopovichi-dev.vercel.app/) è stata completata, aggiornabile e raggiungibile sul Web senza costi di hosting.
Tutti gli obiettivi sono stati completati senza scrivere tonnellate di righe di codice!!

Benvenuti nell'homepage personale di Jacopo Vichi, sviluppatore fullstack appassionato di open source e sistemi Linux. In questo articolo descrivo come ho realizzato la mia homepage utilizzando le API offerte da Directus, NextJS e la pubblicazione tramite hosting Vercel

In questo articolo descrivo lo stack software utilizzato per la sua realizzazione e le difficolta' incontrate durante l'implementazione.

Come ho realizzato la mia homepage

Blog

Benvenuti nell'homepage personale di Jacopo Vichi, sviluppatore fullstack appassionato di open source e sistemi Linux. In questo portale potrai conoscere me, i miei lavori e leggere le pubblicazioni sul mio blog