Rendering lato client, lato server e generazione di siti statici a confronto

Ogni volta che si accede a un sito web, il browser deve rendere quella pagina in modo che sia presentata in modo accattivante e offra il grado di interattività desiderato. Tuttavia, a seconda dell’approccio di programmazione del progetto web, gli script dinamici e il codice statico possono essere elaborati in modi molto diversi. Vediamo da vicino i tre approcci più importanti: rendering lato server, rendering lato client e generazione di siti statici.

Il rendering o scripting lato server (in inglese conosciuto come “server-side rendering” o “server-side scripting”) è una tecnica utilizzata nello sviluppo di siti web con elementi dinamici e applicazioni web. Si basa sull’uso di script che vengono eseguiti dal server web servendosi di linguaggi di script adeguati quando si richiede il contenuto corrispondente con il browser. Tutte le istruzioni HTML, CSS e JavaScript sono caricate completamente con la richiesta iniziale.

Tipici linguaggi di programmazione per il rendering lato server sono i seguenti:

• Java
• Ruby
• ASP.NET
• Perl
• PHP
• Python
• Node.js o JavaScript

La grande forza di SSR risiede nel fatto che le pagine web sono precaricate dal server. Dal punto di vista dell’utente, una richiesta viene elaborata quasi immediatamente e la pagina richiamata viene perciò visualizzata molto rapidamente. Questo approccio per ottimizzare la velocità di caricamento è particolarmente adatto ai siti web statici. Il caricamento veloce della pagina ha anche un effetto positivo sulla valutazione da parte dei motori di ricerca, perché i crawler possono rilevare le pagine più facilmente o più rapidamente grazie al rendering lato server.

Lo scripting lato server richiede che il server fornisca pagine HTML precaricate a ogni richiesta. In particolare, se un client invia continuamente ulteriori richieste al server web per fornire all’utente nuove informazioni modificate, le capacità del server risulteranno sovraccaricate. Il rendering lato server (SSR) non è quindi adatto per i siti web che hanno un alto numero di richieste o che richiedono un gran numero di interazioni utente. Nei progetti di questo tipo, il tempo di risposta del server web annullerebbe il vantaggio del caricamento ottimizzato della pagina.

Il linguaggio di scripting lato client più importante è JavaScript.

Il rendering lato client (CSR) è un approccio utile soprattutto per i progetti web con molte interazioni utente. Se il processo di caricamento iniziale del sito web è relativamente lungo, il successivo rendering delle pagine successive è più veloce. L’esperienza utente è significativamente migliore che con il rendering lato server, poiché non tutti gli script e i contenuti devono essere caricati completamente in una volta sola quando l’utente richiama una nuova pagina.

Poiché gli script vengono eseguiti nel browser dell’utente, questi ha la possibilità di visualizzare il codice sorgente, a differenza di quanto accade con gli script lato server.

Gli script lato client presentano due problemi cruciali: in primo luogo, è più difficile per i motori di ricerca rilevare e indicizzare le pagine. I crawler di Google sono in grado di farlo, ma le condizioni SEO non sono ottimali in questo caso, soprattutto perché molti altri motori di ricerca spesso non riescono affatto a indicizzare le pagine renderizzate lato client.

D’altra parte, lo scripting lato client richiede che JavaScript sia supportato dal browser. Solitamente è sempre così, ma poiché anche i pop-up e gli strumenti di tracciamento si basano sulla tecnica CSR e gli script lato client influenzano il tempo di caricamento, ci sono varie estensioni del browser che bloccano gli script.

Tra i generatori di siti statici più popolari rientrano i seguenti:

• Jekyll
• Hugo
• Next
• Gatsby
• Gridsome
• Nuxt
• Hexo
• Eleventy
• Jigsaw
• Vuepress

La generazione di siti statici mostra i suoi punti di forza soprattutto nei progetti che hanno molti contenuti che non cambiano regolarmente. Degli esempi tipici sono un sito personale o un blog, che presentano tipicamente pochi contenuti dinamici e beneficiano notevolmente della massima velocità risultante dal prerendering (cioè dal precaricamento della pagina) da parte di un generatore di siti statici. Inoltre, i progetti SSG sono meno soggetti ad attacchi, poiché il potenziale di rischio è limitato al singolo clic quando il client visualizza la pagina.

Il prerendering nel contesto di SSG non ha solo vantaggi: l’approccio si rivela estremamente impraticabile quando un progetto web è soggetto a cambiamenti regolari, sia di natura tecnica che in termini di contenuto. A ogni modifica, le pagine statiche del progetto web devono essere “precaricate” di nuovo. Più esteso è il progetto, più tempo richiede questo processo di costruzione, ed è per questo che la generazione di siti statici non è adatta a siti web con un gran numero di pagine statiche.

Il rendering lato server assicura un caricamento delle pagine eccellente, che però comporta un carico elevato sul server web. Il rendering lato client va nella direzione opposta e alleggerisce il carico del server rendendo prima una gran parte della pagina nel browser, a patto che l’utente non abbia bloccato JavaScript. La generazione di siti statici risparmia sia il server che il client e, grazie all’approccio di prerendering, assicura una consegna veloce del contenuto, a condizione che non si tratti di contenuti interattivi e in continuo cambiamento.

Tutte e tre queste strategie per il rendering dei progetti web hanno i loro pro e contro. Valutate attentamente quali caratteristiche si adattano meglio al vostro progetto per trovare l’approccio migliore per la vostra applicazione web.