Categories
Node.js React web

Server-Side Rendering

Ci sono due modi in cui un sito web realizzato con ReactJS può fornire una prima pagina al browser:

  • Client-Side Rendering (CSR) una cornice bianca vuota con una clessidra al suo interno (un JavaScript da eseguire nel browser)
  • Server-Side Rendering (SSR) una pagina HTML che appare immediatamente decorata nel browser

La soluzione da scegliere dipende dal tipo di problema da risolvere.

CSR

Client-Side Rendering è l’approccio predefinito che usa il metodo ReactDom.render()

Questa è la sequenza da eseguire:

  • il client richiede una risorsa al server (url)
  • il server invia una cornice vuota o template con un collegamento ad uno script
  • il server invia uno script client-bundle.js
  • il client deve eseguire il JavaScript (rendering nel client)
  • generazione virtual DOM nel client
  • visualizzazione actual DOM nel client
  • il client mostra la pagina

Gli svantaggi sono:

  • semplicità del progetto
  • carico dell’elaborazione nel client (l’utente potrebbe aspettare l’elaborazione)
  • alcuni motori di ricerca non vedono il contenuto della pagina

I vantaggi sono:

  • l’utente può interagire con tutta la pagina (interamente in locale) come con un’applicazione

In queste immagini si può osservare il contenuto della pagina web (in attesa di ottenere il bundle Javascript)

Quando si disattiva l’interprete JavaScript, visualizza solo un messaggio

screenshot del browser dove si legge You need to enable Javascript to run this app

Questo è il codice sorgente della pagina (quando l’interprete JavaScript è disattivato)

codice sorgente di una pagina web dove si trovano solo pochissime righe: il bundle.js e il messaggio visto nel precedente screenshot

SSR

Server-Side Rendering è l’approccio che usa il metodo ReactDOM.hydrate()

Questa è la sequenza da eseguire:

  • il client richiede una risorsa al server (url)
  • il server invia una cornice vuota o template con un collegamento ad uno script
  • il server possiede uno script client-bundle.js da eseguire (rendering nel server)
  • il server completa il collegamento e produce una pagina markup HTML
  • il client riceve la pagina markup come una stringa di caratteri
  • il client mostra tale pagina
  • contemporaneamente inizia a scaricare quello che serve per le pagine successive

Gli svantaggi sono:

  • complessità del progetto
  • carico dell’elaborazione nel server

I vantaggi sono:

  • l’utente vede apparire immediatamente la pagina
  • il motore di ricerca indicizza più facilmente la pagina