Indice

1. Introduzione

• Architettura di un sito web
• Vantaggi di un'architettura web ben definita

2. Architettura

• Next.js
  • Introduzione a Next.js
  • Vantaggi dell'utilizzo di Next.js
• Tailwind CSS
  • Introduzione a Tailwind CSS
  • Vantaggi dell'utilizzo di Tailwind CSS per uno styling rapido
• Strapi
  • Introduzione a Strapi come headless CMS
  • Vantaggi dell'utilizzo di un headless CMS
  • Integrazione di Strapi con il frontend Next.js
• Vercel
  • Introduzione a Vercel come piattaforma di deployment
  • Vantaggi del deployment di applicazioni Next.js su Vercel
  • Processo di deployment su Vercel
  • Uso dei webhook per deploy automatizzati
• Hetzner
  • Introduzione a Hetzner come provider di cloud hosting
  • Scegliere Hetzner per l'hosting di Strapi e del database

3. Conclusione

1. INTRODUZIONE

1.1 Architettura di un sito web

Nel mondo dello sviluppo web, il termine "architettura" si può interpretare in due modi, comprendendo due aspetti distinti ma interconnessi, entrambi cruciali per il successo di un sito web:

• Architettura delle informazioni (IA): Si focalizza sul lato utente del sito, simile alla planimetria di una casa. Approfondisce come le informazioni vengono organizzate, categorizzate e presentate. Proprio come una casa ben progettata garantisce un flusso logico tra le stanze, una solida IA assicura che gli utenti possano navigare senza sforzo e trovare le informazioni che cercano. Menu di navigazione, breadcrumb e gerarchia del sito web rientrano sotto l'ombrello dell'IA.

• Architettura tecnica: Si addentra nelle fondamenta tecniche del sito, rappresentando l'impianto idraulico e il cablaggio elettrico invisibili che fanno funzionare la casa. Qui si esplorano le tecnologie che alimentano il sito, inclusi linguaggi di programmazione, framework, database e piattaforme di distribuzione. Comprendere l'architettura tecnica consente di ottimizzare le prestazioni del sito, garantire la scalabilità e creare un'esperienza online sicura e affidabile.

Sebbene questi due aspetti dell'architettura del sito web possano sembrare distinti, essi lavorano in sinergia. Una IA ben definita informa l'architettura tecnica delineando le funzionalità e le esigenze di contenuto del sito. Al contrario, l'architettura tecnica determina quali strutture informative e funzionalità possono essere realisticamente implementate. Considerando entrambi i lati della medaglia, è possibile creare siti web che non solo sono user-friendly, ma anche tecnicamente solidi e progettati per il successo a lungo termine.

1.2 Vantaggi di un'architettura web ben definita

Questo articolo si concentrerà principalmente sull'architettura tecnica, svelando le varie di tecnologie che danno vita al nostro sito web, analizzando come questi elementi lavorano insieme per creare un'esperienza online performante, scalabile e sicura.

Un'architettura strutturata consente la modularità e la riutilizzabilità del codice. Questo riduce la ridondanza, minimizza le dimensioni dei file e permette l'implementazione di meccanismi di caching efficienti. Il risultato è una maggiore velocità di caricamento delle pagine, un fattore critico sia per il coinvolgimento degli utenti che per il posizionamento SEO.

Un'architettura ben definita separa il livello di presentazione (front-end) dal livello di logica aziendale (back-end) e dall'archiviazione dei dati (database). Questa separazione delle preoccupazioni consente lo sviluppo, il test e il deployment indipendenti di ciascun livello. In pratica, team diversi possono lavorare sull'interfaccia utente senza influenzare le funzionalità back-end, accelerando i cicli di sviluppo e riducendo il rischio di errori.

L'architettura ben progettata anticipa la crescita futura, utilizzando tecnologie e framework che possono essere scalati orizzontalmente (aggiungendo più server) o verticalmente (potenziando le risorse del server) per gestire l'aumento del traffico e delle richieste di dati. Inoltre, la chiara separazione delle preoccupazioni semplifica la manutenzione, permettendo agli sviluppatori di individuare i problemi in specifici livelli senza dover analizzare l'intera base di codice.

Facilitando l'integrazione con API (Application Programming Interfaces) esterne, un'architettura ben definita permette di sfruttare servizi di terze parti per funzionalità come l'elaborazione dei pagamenti, l'integrazione con i social media o i feed di dati in tempo reale. Questo non solo migliora le funzionalità del sito, ma promuove anche la modularità e riduce i tempi di sviluppo.

Infine, una solida architettura può dare priorità alle migliori pratiche di sicurezza fin dalle sue fondamenta. Questo include pratiche di codifica sicura, meccanismi di autenticazione e autorizzazione degli utenti, e la crittografia dei dati sia a riposo che durante il transito. Costruendo la sicurezza nelle fondamenta, si crea un sito web più robusto e meno vulnerabile agli attacchi.

Questi vantaggi tecnici sottolineano l'importanza di un'architettura del sito web ben definita, che va oltre la semplice esperienza utente. Pone le basi per un sito web che non solo è performante e scalabile, ma anche sicuro, manutenibile e adattabile alle esigenze future. Investendo in solide fondamenta tecniche, si crea un sito web in grado di evolversi e prosperare in un ambiente online dinamico.

2. Architettura del Nostro Sito Web Aziendale

2.1 Next.js

Introduzione a Next.js

Next.js ha conquistato il panorama React come un framework innovativo per la creazione di applicazioni web moderne. Si basa su React, ma lo arricchisce con funzionalità aggiuntive che semplificano lo sviluppo di siti web e applicazioni web performanti e SEO-friendly.

Vantaggi di Next.js

Ecco alcuni dei punti chiave che rendono Next.js una scelta allettante per i web developer odierni:

• Rendering lato server (SSR) e generazione statica del sito (SSG): Next.js ti consente di renderizzare i componenti React sul lato server, consentendo caricamenti iniziali più veloci e migliori prestazioni SEO. Inoltre, supporta la generazione statica del sito, dove le pagine possono essere pre-costruite al momento della compilazione, migliorando ulteriormente le prestazioni e riducendo il carico del server.

• Code Splitting automatico: Next.js suddivide automaticamente il tuo codice in chunk più piccoli, consentendo di caricare solo il codice necessario inizialmente. Questo migliora i tempi di caricamento riducendo le dimensioni del bundle iniziale e caricando solo il codice aggiuntivo quando necessario, con un risultato di migliore esperienza utente.

• Routing: Next.js viene fornito con un sistema di routing integrato che consente di creare facilmente percorsi dinamici. Puoi definire i percorsi utilizzando il file system, rendendo intuitivo e semplice organizzare la struttura della tua applicazione.

• API Routes: Next.js fornisce un modo semplice per creare endpoint API all'interno della tua applicazione. Puoi definire route API senza server utilizzando la directory pages/api, consentendo di recuperare dati ed eseguire logiche lato server senza problemi.

• Supporto per CSS-in-JS: Next.js supporta nativamente soluzioni CSS-in-JS come styled-components ed Emotion. Ciò consente di incapsulare gli stili con i tuoi componenti, rendendoli più mantenibili e riutilizzabili.

• Ottimizzazione delle immagini: Next.js ottimizza automaticamente le immagini, riducendone le dimensioni senza compromettere la qualità. Supporta il caricamento pigro e il caricamento responsivo delle immagini, migliorando le prestazioni e l'esperienza utente.

• Supporto TypeScript: Next.js offre un ottimo supporto per TypeScript, consentendo di scrivere codice sicuro dai tipi e individuare gli errori in fase di sviluppo. Ciò porta a codebase più robuste e mantenibili.

• Autenticazione e autorizzazione: Next.js fornisce un supporto integrato per l'autenticazione e l'autorizzazione tramite librerie come NextAuth.js e Auth0. Ciò semplifica l'implementazione dell'autenticazione utente e la protezione delle route dell'applicazione.

• Internazionalizzazione (i18n): Next.js offre un supporto integrato per l'internazionalizzazione, consentendo di creare siti web multilingue con facilità. Fornisce strumenti per gestire le traduzioni e il contenuto specifico della località, semplificando il raggiungimento di un pubblico globale.

• Analisi e monitoraggio delle prestazioni: Next.js si integra perfettamente con popolari strumenti di analisi e monitoraggio delle prestazioni come Google Analytics e Vercel Analytics. Ciò consente di tracciare il comportamento dell'utente, monitorare le metriche delle prestazioni e ottimizzare di conseguenza l'applicazione.

2.2 Tailwind CSS

Introduzione a Tailwind CSS

Tailwind CSS è un framework CSS di basso livello che fornisce classi di utilità per la creazione di interfacce utente responsive, consentendo una personalizzazione completa del design.

Vantaggi di Tailwind CSS:

• Rapidità di Sviluppo: Elimina la necessità di scrivere CSS personalizzato, accelerando il processo di styling.
• Facilità d'Uso: Classi intuitive e descrittive.
• Flessibilità e Personalizzazione: Classi di utilità combinabili per creare design unici.
• Responsive per Definizione: Varianti responsive integrate.
• Coerenza del Design: Promuove un'estetica uniforme.
• Minore Mantenibilità del CSS: Codice CSS più conciso e facile da mantenere.

Esempio di uso di TailwindCSS:

<SectionWrapper className="h-40px bg-[white] !py-[4rem] !z-[20] mt-[5rem] rounded-t-[3rem]">
      <div className="flex items-center justify-items-center">
        <Button type="link" data={backButton} className="text-[#94A3B8] flex-row-reverse text-[1rem] leading-[1rem] weight-[500]" />
      </div>
    </SectionWrapper>

2.3 Strapi come CMS Headless

Introduzione a Strapi

Strapi è un CMS headless open source basato su Node.js che offre un'interfaccia utente intuitiva e un'API RESTful flessibile.

Vantaggi di Strapi

• Decoupling del Frontend e del Backend: Maggiore flessibilità e scalabilità.
• API RESTful: Facilita l'integrazione con vari frontend.
• Sviluppo Agile: Promuove flussi di lavoro agili.
• Integrazione con Next.js

Integrare Strapi con Nextjs

Strapi si integra facilmente con Next.js, offrendo una soluzione potente per la gestione dei contenuti e la creazione di esperienze utente ottimizzate.

L'integrazione di Strapi con Next.js consente di creare applicazioni web front-end dinamiche e performanti sfruttando i punti di forza di entrambi i framework. Ecco una panoramica semplificata del processo di integrazione:

1. Configurare Strapi:

• Installare e avviare Strapi: Inizia installando e avviando un'istanza Strapi. Questo ti fornirà un'interfaccia web per gestire i tuoi contenuti e le API.
• Creare tipi di contenuto: Definisci i tipi di contenuto che rappresentano i dati della tua applicazione, come articoli, prodotti o profili utente.
• Aggiungere dati: Popola i tuoi tipi di contenuto con dati utilizzando l'interfaccia web di Strapi o importandoli da fonti esterne.

2. Consumare l'API Strapi da Next.js:

• Creare pagine Next.js: Crea le pagine della tua applicazione Next.js che visualizzeranno i dati recuperati da Strapi.
• Effettuare richieste API: Utilizza le librerie installate per effettuare richieste API alle rotte API esposte da Strapi.
• Recuperare i dati: Elabora le risposte API per estrarre i dati necessari per popolare le tue pagine Next.js.

3. Gestire l'autenticazione:

• Implementare l'autenticazione in Strapi: Configura l'autenticazione in Strapi per gestire l'accesso agli utenti e ai dati.
• Inviare token di autenticazione a Next.js: Quando un utente si autentica in Strapi, invia un token di autenticazione a Next.js.
• Includi i token nelle richieste API: Includi i token di autenticazione nelle richieste API a Strapi da Next.js per autorizzare l'accesso ai dati protetti.

2.4 Vercel come Piattaforma di Deployment

Introduzione a Vercel

Vercel è una piattaforma di deployment serverless ottimizzata per applicazioni basate su JavaScript e framework come Next.js.

Vantaggi di Vercel

• Deployment Semplice e Veloce: Deploy direttamente da repository Git.
• Prestazioni Elevate e Scalabilità Automatica: Infrastruttura gestita e ridimensionamento automatico.
• Global CDN e Ottimizzazione SEO: Tempi di caricamento rapidi e visibilità sui motori di ricerca.
• Sicurezza Integrata: Certificati SSL gratuiti e protezione DDoS.
• Collaborazione Fluida: Team e deployment automatizzati.

Processo di Deployment

1. Creare un account Vercel.
2. Connettere il repository Git.
3. Selezionare l'impostazione di deployment.
4. Avviare il deployment.
5. Monitorare lo stato del deployment.

Webhook

I webhook sono URL endpoint che consentono a diverse applicazioni di comunicare tra loro in modo automatizzato. Quando un evento specifico si verifica in un'applicazione, questa invia una richiesta HTTP POST al webhook, notificando il server ricevente. I webhook sono utilizzati per automatizzare processi, inviare notifiche e integrare servizi.

Uso dei Webhook di Vercel con Strapi:

1. Configurazione del Webhook di Vercel

• Accedi al tuo account Vercel e seleziona il progetto per cui vuoi configurare il webhook.
• Vai alla scheda Settings (Impostazioni) del progetto.
• Nella sezione Git trova l'opzione per configurare i webhook.
• Selezionare il branch e poi cliccare su Add per creare un nuovo webhook.
• Nella UI di STRAPI andare alla sezione Settings.
• Seleziona Webhooks.
• Clicca su Create new webhook.
• Inserisci un nome per il webhook.
• Inserisci l'URL webhook creato su Vercel.
• Seleziona gli eventi da monitorare, come entry.create, entry.update, entry.delete per contenuti creati, aggiornati o eliminati.
• Salva il webhook. Setup del webhook per eseguire il deploy di Vercel alla fine del deploy di Strapi

{
  /**
   * An asynchronous bootstrap function that runs before
   * your application gets started.
   *
   * This gives you an opportunity to set up your data model,
   * run jobs, or perform some special logic.
   */
  bootstrap(/*{ strapi }*/) {
    if(process.env.GENERIC_ENV!=="local"){  //executes redeploy on Vercel after 30 seconds, starting from when Strapi starts up
      setTimeout(()=>{
        fetch(`${process.env.VERCEL_DEPLOY_HOOK}`,{
          method: "POST"
        })
        console.log("Called deploy hook");
        ;
      }, 30000);
    }
  },
}

2.5 Hetzner come Provider di Cloud Hosting

Introduzione a Hetzner

Hetzner è un provider di cloud hosting affidabile e con prestazioni elevate, noto per i suoi costi competitivi.

Vantaggi di Hetzner

• Affidabilità e Uptime Elevati: Data center robusti e ridondanti.
• Prestazioni Elevate e Scalabilità: Opzioni di server flessibili.
• Sicurezza Integrata: Firewall, VPN e crittografia.
• Flessibilità e Controllo: Elevato livello di controllo sui server.
• Costi Competitivi: Soluzioni di hosting a prezzi competitivi.

Abbiamo scelto di hostare su una macchina di hetzner sia il database PostgreSQL sia Strapi, in questo modo abbiamo ridotto il tempo di build fino a una media di 8 minuti.

3. Conclusione

L'architettura del nostro sito, descritta in questo articolo, rappresenta un esempio concreto di come tecnologie moderne e approcci ben definiti possano creare una piattaforma digitale solida e scalabile. La sinergia tra Next.js, Tailwind CSS, Strapi, Vercel e Hetzner offre una serie di vantaggi tangibili:

• Prestazioni elevate:

Tempi di caricamento rapidi e un'esperienza utente fluida, anche con un aumento del traffico, grazie al rendering lato server di Next.js, alla generazione statica del sito e all'infrastruttura scalabile di Vercel.

• Scalabilità:

Un'architettura progettata per crescere con le esigenze aziendali, potendo essere scalata orizzontalmente o verticalmente per gestire un numero crescente di utenti e richieste.

• Manutenibilità:

Semplicità nella manutenzione e nell'aggiornamento del sito web, riducendo i tempi di sviluppo e i costi associati, grazie alla separazione delle preoccupazioni e all'utilizzo di tecnologie moderne come Tailwind CSS e Strapi.

• Sicurezza:

Un ambiente online protetto e affidabile garantito dall'implementazione di pratiche di sicurezza sin dalle prime fasi, dall'utilizzo di provider affidabili come Hetzner e dall'integrazione di funzionalità di sicurezza in Vercel e Strapi.

• Esperienza utente ottimizzata:

Un'interfaccia utente intuitiva e un design responsive che creano un'esperienza utente coinvolgente e piacevole per tutti i visitatori da qualsiasi dispositivo.

• Un modello da seguire:

L'architettura del sito si configura come un modello da seguire per le aziende che desiderano creare una presenza digitale solida, scalabile e sicura che supporti i loro obiettivi di business a lungo termine.

• Approccio iterativo e ottimizzazione continua:

Oltre ai punti chiave discussi sopra, è fondamentale sottolineare l'importanza di un approccio iterativo allo sviluppo del sito web.

L'adozione di un approccio agile e l'utilizzo di strumenti di analisi e monitoraggio permettono di ottimizzare continuamente il sito web, garantendo che rimanga all'avanguardia e in grado di soddisfare le esigenze di un panorama digitale in continua evoluzione.