Siti statici? Facciamo chiarezza

Oggi si sente parlare sempre di più di siti statici e dei loro vantaggi, ma la definizione di “sito statico” può trarre in inganno.

Sono pochi i siti che potrebbero definirsi “statici” in senso letterale, parte dei loro contenuti varia in genere con una certa regolarità, a seconda delle finalità per cui sono stati pensati, e anche i cosiddetti siti vetrina contengono frequenti avvisi per i propri clienti o contenuti ripresi da altre fonti variabili, come per esempio i canali propri social.

Come è possibile quindi che oggi si possa definire vantaggioso o moderno un sito statico?

In realtà un sito statico NON è un sito i cui contenuti non variano, ma bensì un sito il cui codice viene compilato in anticipo, spesso a intervalli regolari a seconda delle necessità, ed è subito pronto per essere scaricato e renderizzato immediatamente dal browser degli utenti.

Quindi, ciò che differenzia realmente i siti statici da quelli dinamici è come e quando avviene la generazione del codice sorgente che permette ai contenuti di essere mostrati dal nostro browser.

Per comprendere cosa questo significhi praticamente, e per valutare quale opzione utilizzare, è opportuno fare una breve panoramica di queste diverse tecnologie.

I siti dinamici

In particolare, un sito web dinamico è un sito il cui codice sorgente viene generato, in tutto o in parte, nello stesso momento in cui il sito viene visitato. Un sito di questo tipo può dunque mostrare contenuti diversi ogni volta che viene richiamato, attingendo da fonti interne (es. database), o esterne al sito (es. API).

Per realizzare siti dinamici si ricorre a linguaggi di programmazione specifici, ed esistono principalmente due approcci:

• la generazione lato server (Server Side Rendering)
• la generazione lato client (Client Side Rendering)

Generazione dei siti dinamici lato server (SSR)

Nella generazione delle pagine lato server, la costruzione della pagina web è controllata dal server e avviene in risposta alla visita dell’utente. Essendo la pagina web generata al momento della visita, il server deve farsi carico di eseguire tutta una serie di operazioni per far sì che le pagine si possano riempire di contenuti e poter essere mostrate.

Vantaggi e svantaggi del SSR (ad es. Wordpress)

Con la generazione lato server (SSR) la programmazione necessaria per generare le pagine del sito viene conservata ed eseguita sul server, senza appesantire il trasferimento dei dati verso il broswer dell’utente che quindi può visualizzare la pagina completa non appena questa gli viene inviata.

Tuttavia, la generazione “al volo” delle pagine sul server può richiedere tempi di elaborazione lunghi e fintanto che il server non ha completato tutte le operazioni necessarie a richiamare tutti i dati da includere nel sito, il sito risulta in caricamento e per l’utente risulta quindi più lento. Questo procedimento viene inoltre eseguito in tempo reale per ogni visitatore, rendendo più difficile e lenta la gestione di molti visitatori contemporaneamente.

Per questa ragione, spesso i siti di questo tipo vengono (o dovrebbero essere) forniti di server più potenti, e quindi più costosi, per far sì che possano eseguire le operazioni “dietro le quinte” più velocemente.

Per limitare questi problemi si ricorre spesso alla conservazione di una copia del sito in una memoria temporanea (la cosiddetta cache), pronta per essere inviata ai visitatori. Tuttavia questa anche copia cache deve essere aggiornata frequentemente per non invalidare i vantaggi di un sito dinamico.

Un esempio molto diffuso di siti di questo tipo sono quelli in PHP basati sulla piattaforma Wordpress, che se da un lato consente anche a chi non conosce la programmazione di creare siti web, dall’altro generalmente i siti così creati sono ospitati su server economici che ne penalizzano fortemente le prestazioni ottenendo punteggi inferiori in termini di velocità e penalizzandone quindi anche l’indicizzazione sui motori di ricerca.

Generazione dei siti dinamici lato client (CSR)

La generazione della pagine lato client (Client Side Rendering), consiste al contrario nell’inviare al browser tutta la programmazione necessaria alla creazione delle pagine nel momento in cui il sito viene visitato, affidando quindi la generazione delle pagine direttamente al browser degli utenti.

Vantaggi e svantaggi del CSR (ad es. React)

Lo spostamento del lavoro di generazione delle pagine dal server al client, non comportando continue richieste al server per ogni caricamento delle pagine permette di ottenere siti molto reattivi, che danno l’idea di funzionare come una sorta di applicazione. Con questo metodo inoltre il lavoro del server è molto alleggerito, consentendo la gestione di più visitatori contemporaneamente, rispetto a un analogo sito generato in SSR.

In questo caso però il server non invia al client una pagina web già preparata e pronta per essere visualizzata, ma piuttosto gli deve trasmettere un “pacchetto” (spesso piuttosto pesante) contenente tutti i file di programmazione tutte le librerie di appoggio necessarie per consentire al browser di raccogliere tutti i contenuti necessari e provvedere autonomamente alla generazione delle pagine web da mostrarci.

A causa della notevole quantità di file di programmazione e librerie che devono essere traferiti, il caricamento iniziale di questi siti può avvenire più lentamente. Inoltre, visto che le pagine e i relativi contenuti non sono direttamente disponibili già pronti sui server, i motori di ricerca trovano maggiore difficoltà ad accedere ai contenuti di questi siti, che possono quindi venire penalizzati nell’indicizzazione.

I framework più moderni usano stratagemmi tecnici per limitare questi problemi, ma si tratta pur sempre di aggiungere ulteiori livelli di complessità da gestire che non sono sempre necessari.

Esempi di framework JS sono React, Vue e Svelte.

Quindi? Meglio siti dinamici SSR o CSR?

È chiaro che, dove sia necessario mantenere una alta dinamicità dei siti, la scelta del tipo di rendering va fatta valutando tutta una serie di pro e contro, che andranno poi ad avere anche ricadute sulla mole di lavoro necessaria per la gestione e manutenzione del sito.

Siti statici, di nome ma non di fatto

Nei casi in cui non è strettamente necessario che il contenuto dei siti cambi in continuazione, esiste però la possibilità di ricorrere ai siti statici che, come visto, malgrado il nome possono includere contenuti variabili e presentare anche funzionalità dinamiche.

Come visto all’inizio infatti, un sito statico è tradizionalmente un sito in cui il codice sorgente viene preparato in anticipo ed è già pronto per essere trasferito mostrato dal nostro browser.

Vantaggi e svantaggi dei siti statici

Uno dei principali vantaggi dei siti statici rispetto ai siti dinamici è la loro velocità di caricamento. Il contenuto infatti viene scaricato direttamente dal server senza la necessità di richiamare dati da database o altre fonti e, qualora ciò sia necessario, questo avviene compilando periodicamente in base alle necessità. Avere il codice delle pagine già pronto e i contenuti già definiti sul server rende inoltre molto agevole l’indicizzazione delle pagine da parte dei motori di ricerca e, per lo stesso motivo, nella maggior parte dei casi si possono utilizzare server poco potenti e più economici pur mantenendo un’alta velocità di caricamento. I siti statici sono generalmente anche più sicuri e meno vulnerabili agli attacchi hacker.

Di contro, come detto, i siti statici non sono adatti quando i contenuti devono variare in continuazione o essere aggiornati molto di frequente.

Come viene realizzato un sito statico?

Gli strumenti generalmente usati per sviluppare siti statici sono dei framework in javascript facilitano la gestione del codice e che si occupano di effettuare la generazione del codice sorgente statico attingendo da fonti di dati dinamiche.

Tra i generatore di siti statici (SSG) più utilizzati troviamo Jekyll, Hugo, A11 e Astro.

Come già accennato, grazie a questi strumenti e a tecniche di programmazione più complesse come la partial hydration e l’hybrid rendering, anche i siti statici possono contenere componenti dinamici, realizzati anche con componenti di framework Javascript come React.

La Partial Hydration

In particolare, tramite la cosiddetta partial hydration di Astro è possibile inserire all’interno di una pagina web statica delle “isole” dinamiche che vengono però caricate (o “idratate”) solo al bisogno, senza appesantire il caricamento iniziale e inviando così inizialmente al brower un sito web completamente privo di javascript che risulterà molto più veloce.

Hybrid Rendering

Oltre alla generazione di siti web statici tramite Partial Hydration, Astro offre anche la possibilità di realizzare siti web mediante Hybrid Rendering, ovvero la generazione di siti che abbiano non solo alcune funzionalità dinamiche, ma anche la capacità di lavorare come un sito dinamico tradizionale tramite l’impiego di un server. Ciò può rendere ancora più vantaggioso ricorrere a generatori di siti statici come Astro.

Conclusioni

I siti web statici, malgrado il nome, non sono siti “immutabili” ma bensì siti il cui codice sorgente viene preparato in anticipo e aggiornato secondo le necessità, offrendo un caricamento veloce e senza ritardi di tutte le pagine web, un SEO ottimizzato e maggiore sicurezza, senza sacrificare una parte dinamica grazie ai nuovi SSG come Astro. Tuttavia, per i siti ricchi di contenuti che variano molto di frequente è ancora da preferire un approccio completamente dinamico offerto dalle soluzione SSR o CSR.