Rendering lato server con React

Un po' di React

React è una libreria JavaScript frontend open source, creata e gestita dalla community di sviluppatori di Facebook. Viene utilizzato per creare interfacce utente o componenti dell'interfaccia utente.

Tuttavia, questa definizione potrebbe non essere del tutto comprensibile per i novizi. Abbiamo il post sul blog perfetto che ti guida attraverso una breve spiegazione di React, fino a una descrizione tecnica molto dettagliata, che puoi trovare qui.

Il viaggio di una pagina web | Dal server al tuo browser

Per capire cos'è il rendering lato server, prima di tutto è importante avere una panoramica di come una pagina web appare sullo schermo, che è chiarita dal diagramma seguente:

1. Ogni volta che si digita l'URL di un sito Web o si fa clic su un collegamento al sito Web, il browser invia una richiesta di alcuni file al server appropriato, identificato dall'URL.
2. Il server invia alcuni file come i file HTML e JavaScript, tra gli altri, al tuo browser.
3. Il tuo browser scarica e 'renderizza' o elabora questi file e tu puoi vedere e interagire con la pagina web che hai richiesto.

Questa è una semplificazione eccessiva del percorso di una pagina Web, ma è una prefazione sufficientemente buona per spiegare i diversi passaggi secondari e i diversi modi (incluso il rendering lato server) per eseguire questo compito.

Viaggio di una pagina Web di rendering lato client "normale".

Approfondindo il processo menzionato nella sezione precedente, abbiamo una tecnica nota come Client Side Rendering o CSR, che è stata utilizzata da molto tempo, per visualizzare un sito Web sugli schermi degli utenti. Questo è spiegato nel diagramma seguente:

1. Digitando l'URL di un sito Web o facendo clic su un collegamento al sito Web, il browser invia una richiesta di alcuni file al server appropriato, identificato dall'URL.
2. Il server invia il file HTML che contiene i riferimenti ad altre risorse come file immagine, file CSS e file JavaScript.
3. Il browser invia nuovamente una richiesta al server e scarica tutti i file, inclusi i file CSS e JavaScript a cui si fa riferimento nel file HTML.
   1. Questo può essere un fattore che contribuisce ad aumentare il tempo di caricamento di un sito Web se gli utenti hanno una connessione scadente e il file JavaScript è di grandi dimensioni.
4. Una volta che questi file sono stati scaricati dal browser, il browser esegue quindi il framework o la libreria (ad esempio React) e analizza i file JavaScript, che sono responsabili di rendere interattiva la pagina web.
   1. Dal punto di vista dell'ottimizzazione della velocità, questo punto dipende dalla macchina client e se il client è un hardware a bassa potenza, l'operazione può richiedere molto tempo.
   2. L'utente continua a vedere la schermata di caricamento durante l'esecuzione di questi passaggi
5. La pagina web viene finalmente caricata completamente e l'utente può vedere e interagire con la pagina web.

Come è chiaro con i passaggi sopra menzionati, dal punto di vista dell'utente, questi possono vedere e interagire con il sito Web solo nella fase finale, dopo che tutti i file necessari sono stati scaricati e visualizzati dalla macchina client.

Ciò può richiedere un'enorme quantità di tempo poiché dipende dalle prestazioni della macchina client nell'esecuzione del framework e nell'analisi dei file JavaScript.

Il viaggio della pagina Web di rendering lato server

Spiegandolo in una singola riga, Server Side Rendering o SSR è il processo di prendere un sito Web con framework JavaScript lato client e renderlo in HTML e CSS statici sul server anziché sul client, come nel caso della CSR.

Di seguito viene menzionata una rappresentazione pittorica del viaggio che una pagina web compie con Server Side Rendering, con React:

1. Digitando l'URL di un sito Web o facendo clic su un collegamento al sito Web, il browser invia una richiesta di alcuni file al server appropriato, identificato dall'URL.
2. Il server, invece di inviare semplicemente file HTML vanilla come in CSR, esegue il rendering dell'app in una stringa utilizzando la funzione renderToString importata da react-dom/server
   1. Questo viene quindi iniettato nel file index.html e inviato al browser.
   2. Questo è il punto cruciale di SSR, dal punto di vista funzionale, poiché è qui che il server esegue il rendering della pagina e non la macchina client.
3. Il browser esegue il rendering di questo file HTML determinando il popolamento della vista nel browser.
   1. Tuttavia, questo non è ancora interattivo, ma l'utente può vedere la vista finale della pagina web.
4. Il browser invia nuovamente una richiesta al server e scarica tutti i file a cui si fa riferimento nel file HTML, inclusi i file JavaScript.
5. Una volta scaricati tutti gli script, il componente React viene nuovamente visualizzato sul client. Tuttavia, questa volta, idrata la vista esistente invece di sovrascriverla.
   1. "Idratare" una vista significa che associa qualsiasi gestore di eventi agli elementi DOM (Document Object Model) sottoposti a rendering ma mantiene intatti gli elementi DOM sottoposti a rendering. In questo modo, lo stato degli elementi DOM viene preservato e non si verifica alcun ripristino della vista.
6. La pagina web è finalmente completamente caricata e l'utente può ora interagire con la pagina che ha potuto vedere dal punto 3 stesso.

Pertanto, uno dei maggiori cambiamenti visivi dal punto di vista dell'utente è che la pagina Web diventa "visibile" abbastanza rapidamente, poiché il rendering dell'HTML non richiede molte risorse, parlando dal punto di vista del browser.

Ciò non rende intrinsecamente il caricamento della pagina più veloce di un'app non SSR, ma offre agli utenti la visualizzazione della pagina Web mentre i file JavaScript vengono scaricati e analizzati in background, dopodiché la pagina Web diventa interattiva. Ciò significa che il TTI, ovvero Time To Interactive (questo è il tempo impiegato dalla pagina web per essere completamente interattiva da quando l'utente richiede la pagina web) è un po' più del tempo impiegato dalla pagina web per essere visibile nel browser.

Quindi, in uno scenario SSR, per un primo tempo di rendering più rapido, il tuo HTML e CSS devono essere significativi per gli utenti e JavaScript può essere il miglioramento per HTML e CSS, poiché il suo caricamento è differito.

Un malinteso comune sul funzionamento di SSR con React è che dopo ogni modifica, ad esempio un utente che richiede nuovi dati, il server completa nuovamente tutti i passaggi e invia il file HTML con la nuova interfaccia utente al browser, ma non è così . Viene eseguito solo un aggiornamento parziale della pagina. Sebbene il rendering sia effettuato dal server, l'output finalizzato viene inserito nel DOM 'idratandolo', come spiegato in precedenza.

Rendering lato server | Quando e quando non usarlo

• Se hai bisogno di una SEO forte, scegli SSR perché è più facile scansionare i motori di ricerca.
• Per i siti Web incentrati sui contenuti e non sull'interazione, come blog, siti Web di notizie, siti Web statici e siti Web pesanti, SSR può essere un vantaggio in quanto caricherà il punto cruciale del tuo sito Web, ovvero i contenuti alla velocità della luce.
• Ci vuole tempo e fatica sul lato server per eseguire il rendering e generare i file da inviare al browser. Quindi, se hai un budget limitato per server e operazioni, è meglio non implementare SSR poiché ci saranno molte richieste inviate al tuo server.
  • Tuttavia, con provider come Firebase, possiamo generare dinamicamente contenuti con funzioni cloud e il server può archiviarli nella cache CDN
  • Ciò che farebbe è che la prossima volta che l'utente richiede, la generazione dei file non viene eseguita nuovamente dal server. Piuttosto, viene servito solo da un bordo CDN locale, migliorando i tempi di caricamento dal punto di vista dell'utente e utilizzando anche meno risorse del server.

In che modo React è buono per SSR?

React è una scelta eccellente per implementare SSR perché incorpora il concetto di un DOM virtuale (Document Object Model).

Ciò consente agli sviluppatori di creare una versione virtuale dell'app React e di averla nel server stesso.

Ciò semplifica il rendering in un HTML utilizzando la funzione renderToString come discusso in precedenza, invialo al browser in modo che il browser possa renderizzarlo abbastanza rapidamente e creare una versione virtuale sulla macchina client.

Quindi, considerando il fatto che questa versione virtuale corrisponde all'HTML che abbiamo inviato dal server, React non lo renderà nuovamente, diminuendo così il Time To Interactive (TTI), risultando in un caricamento "più veloce" della pagina web.

SSR, tutto il giorno, tutti i giorni!

Vorremmo che ci fosse una soluzione unica per tutto, ma è tutt'altro che vero, soprattutto con le nuove tecnologie. Sebbene l'SSR abbia molti vantaggi, ci sono alcuni casi, come discusso in precedenza, per i quali l'SSR potrebbe non essere una buona scelta; siti altamente interattivi che ne sono all'avanguardia.

È qui che entrano in gioco i Creole Studios. Abbiamo una serie di esperti di tecnologia, sempre al passo con quasi tutte le nuove tecnologie che compaiono nel techverse. Capiremo le tue esigenze aziendali e ti forniremo soluzioni personalizzate, che si tratti di un'app SSR o CSR, e stai certo che non dovrai preoccuparti di nulla mentre noi facciamo il lavoro pesante per te. Contattaci e ottieni le tue idee dalla tua testa in un'app!