In questo articolo ti parlo dei pro e dei contro, anche in ottica SEO, di client-side e server-side rendering.

La scelta tra le due tipologie di render dovrebbe essere basata prima di tutto sui vantaggi che ne trae la web app più che su tutto il resto. In ogni caso parleremo anche di velocità e di Google.

Client-side e Server-side Rendering

Negli ultimi anni il client-side rendering sta spopolando e come giusto che sia tutte le aziende più moderne hanno subito adattato le nuove librerie e framework JavaScript che ti permettono di fare un lavoro del genere.

Un esempio è ReactJS, di cui ho scritto una guida a questo indirizzo. Un altro esempio è Vue.js.

In questo articolo non voglio fare nessun tipo di paragone tra le diverse librerie e framework, ma solo informarti delle differenze, dei pro e dei contro, che ci sono nell’utilizzo di un tipo di rendering rispetto all’altro.

Server-side Rendering

In questa guida nei riguardi di client-side e server-side rendering direi di iniziare a parlare del server-side rendering per primo.

Il server-side rendering sono convinto che sei molto abituato a vederlo perché i blog creati con WordPress, esattamente come il mio, vivono di server-side rendering.

Sono convinto che ci hai fatto caso. Ogni volta che cambi pagina e clicchi su un link si ricarica interamente tutta la pagina del browser. Questo accade perché ogni volta che si vuole una pagina viene effettuata una chiamata al server che ci darà in risposta l’intera pagina da visualizzare.

La velocità di risposta del server è data dalla potenza del server, dal numero di utenti connessi al tuo sito web e dalla velocità di connessione. Ogni volta che cambierai pagina, anche se tra una pagina e l’altra rimarrà tutto invariato a parte un titolo, o un paragrafo, verrà comunque ricaricato interamente tutto il contenuto.

Deep Learning Specialization on Coursera

Client-side Rendering

Il client-side rendering si ottiene caricando l’HTML della web app di base un’unica volta e poi sfruttando JavaScript si va a servire il contenuto necessario.

A differenza dei siti web fatti con WordPress che normalmente utilizzano PHP, le piattaforme create con librerie come ReactJS non necessitano del caricamento continuo dell’intera pagina. Questo fa sì che l’unico momento dove il tempo di attesa per l’utente è più alto è al caricamento dei file JavaScript all’apertura della web app. Dopo di che le pagine sono rapide e sempre pronte perché viene solamente sostituito il contenuto che cambia.

Un esempio? Guarda il mio blog fatto con PHP. Quando passi da una sezione ad un’altra ci sono alcuni elementi che rimangono sempre fissi: header e footer sono un esempio. Essendo fatto in PHP ogni cambio di pagina richiede al server tutto il contenuto compresi header e footer. Potrei migliorare la cosa sfruttando le Rest API di WordPress e riscrivendo il mio sito web con ReactJS (ho sperimentato l’utilizzo delle Rest API con un’app per Android costruita con React Native).

Presa da Microsoft

Client-side e Server-side Rendering: Pro e Contro

Vediamo quali sono i pro ed i contro delle due tipologie di rendering.

Server-side Rendering

I pro del server-side rendering sono:

La prima pagina si carica più rapidamente.
Almeno a rigor di logica. Con la minificazione dei file JS ed i passi avanti che stiamo facendo mi sembra impercettibile la differenza di caricamento.
E’ una soluzione migliore se il sito web / web app è statico.

I contro del server-side rendering sono:

La pagina che si ricarica da capo ad ogni cambio
Troppa importanza al numero di utenti connessi
Troppa importanza alla potenza del server
User Experience che ne risente
Velocità di utilizzo della piattaforma web inferiore
Maggior numero di richieste al server

Client-side Rendering

I pro del client-side rendering sono:

Migliore User Experience
Maggiore velocità di render dopo il primo caricamento
Ottimo per web app con molta interazione dell’utente
Nessun caricamento delle pagine ad ogni cambio

I contro del client-side rendering sono:

Possibili problemi di SEO, ma solo se non si sta attenti
Un tempo di caricamento iniziale che potrebbe essere maggiore (solo per la prima pagina)

Client-side e Server-side Rendering: SEO

Analizziamo adesso cosa accade in ottica SEO.

Per quanto riguarda il server-side rendering siamo a posto così. Oltre alle ottimizzazioni sull’utilizzo dei corretti tag HTML o sui contenuti, le parole chiave, la descrizione, il title e tutte le altre cose, direi che siamo a posto.

Google, Bing, Yahoo sono perfettamente abituati a leggere un sito web/ web app che sfrutta il rendering server-side.

Per quanto riguarda il client-side rendering Google ha annunciato già nel 2014:

Today, as long as you’re not blocking Googlebot from crawling your JavaScript or CSS files, we are generally able to render and understand your web pages like modern browsers. To reflect this improvement, we recently updated our technical Webmaster Guidelines to recommend against disallowing Googlebot from crawling your site’s CSS or JS files.

E sempre nel Maggio 2015 Search Engine Land ha scritto in un suo articolo:

We ran a series of tests that verified Google is able to execute and index JavaScript with a multitude of implementations. We also confirmed Google is able to render the entire page and read the DOM, thereby indexing dynamically generated content.

SEO signals in the DOM (page titles, meta descriptions, canonical tags, meta robots tags, etc.) are respected. Content dynamically inserted in the DOM is also crawlable and indexable. Furthermore, in certain cases, the DOM signals may even take precedence over contradictory statements in HTML source code. This will need more work, but was the case for several of our tests.

Di conseguenza, le pagine possono essere lette da Google ed indicizzate, anche se il crawl dà ancora problemi, questo non penalizza assolutamente le tue pagine. Inoltre, la direzione presa da Google, è chiaramente quella di far muovere il mondo in questo senso perché nella realtà dei fatti i vantaggi sono tanti specialmente per quanto riguarda l’esperienza utente.

Non a caso siti web come Youtube, Freelancer, UpWork, Udemy sono stati creati con AngularJS. E non a caso Airbnb, American Express, New York Times e tanti altri utilizzano ReactJS.

Conclusioni

Siamo alle porte del 2018 e nella realtà dei fatti creare un sito web, web app, piattaforma web con librerie e framework JavaScript sfruttando il client-side rendering è la direzione che si deve prendere per non rimanere indietro in un futuro ormai immediato.

Spero di essere stato chiaro nel parlarti di client-side e server-side rendering. Quì ti allego le fonti che mi hanno aiutato nella stesura dell’articolo:

Se vuoi iscriviti alla newsletter e non ti perderai i nuovi articoli. Mando da 1 a 4 mail al mese ricapitolando dove siamo arrivati con ogni guida. Con la newsletter hai anche accesso a libri ed ebook gratuiti, così come a coupon Udemy ? .

Per dubbi o domande scrivimi nei commenti ? .

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).

Commenti