In questo articolo cercherò di esaminare più in dettaglio la questione SSR e CSR , di cui ho già parlato in precedenza . Spiegherò i metodi di rendering in un articolo.

In questo articolo esaminerò l'articolo di Jason Miller e Addy Osmani intitolato Rendering on Web e cercherò di spiegare questo argomento.

L'articolo si basa sul mio articolo Dove dovrebbe essere eseguito il rendering HTML? che ho scritto un po' di tempo fa. Tutto inizia con la domanda nel post del blog.

Quando si sviluppa un sito web, esiste la possibilità di eseguire operazioni logiche e di rendering in luoghi diversi. Come faranno gli sviluppatori a decidere quale approccio preferire quando esistono diversi metodi per sviluppare una pagina web?

Per prendere questa decisione, gli sviluppatori devono avere una buona conoscenza dei metodi di rendering e dei conseguenti compromessi in termini di prestazioni.

A.Rendering

Se ti stai chiedendo qual è l'argomento del rendering. Potete leggere i dettagli nel post del blog in cui ho spiegato questo argomento
.

B. Web statico vs dinamico

Un'altra cosa da capire è la differenza tra Web statico e Web dinamico . Le pagine web statiche sono pagine che non ritornano al server e non effettuano richieste con AJAX dopo aver recuperato la pagina dal server (HTML, CSS, JS), il loro contenuto non cambia in base all'utente o non contiene dati dinamici (tasso di cambio, meteo, ecc.) a causa della modifica dei dati in esso contenuti. Ad esempio, blog, notizie, ecc. Al contrario, le pagine dinamiche sono pagine web che richiedono AJAX, API, database, ecc. in cui il contenuto della pagina cambia in base all'intervallo di tempo e ai parametri richiamati.

C. Termini di prestazione

• TTFB (Time to First Byte): tempo che intercorre tra il clic sul collegamento e la ricezione del primo bit di contenuto.
• FP (First Paint): tempo necessario per mostrare il primo pixel all'utente.
• FCP (First Contentful Paint): tempo necessario per visualizzare il primo contenuto logico nella richiesta.
• TTI Tempo di interazione Il momento in cui la pagina è pronta per l'interazione con l'utente (connessione di tutti gli eventi)

• SSR (Server Side Rendering): è il metodo in cui il processo di rendering viene eseguito sul lato server e le pagine dinamiche vengono prodotte recuperandole dal database utilizzando metodi quali ASP.Net, JSP, PHP. Qui, poiché JS avrà un ruolo molto minore nella creazione della schermata, FP e FCP saranno molto veloci, mentre il tempo necessario affinché i dati arrivino dal server sarà più lungo in TTFB .
• CSR (Client Side Rendering): è il metodo in cui il rendering viene eseguito sul lato browser con metodi quali Angular, React, Vue, Svelte; le pagine dinamiche vengono estratte con AJAX e le schermate vengono create sullo schermo combinando Template + Data con il metodo Template Rendering. Con questo metodo, anche se eseguiamo TTFB e FP più velocemente, non possiamo accelerare il TTI, ovvero il tempo impiegato dall'utente per interagire con la pagina web pertinente.
• Rendering statico: in questo metodo utilizzato per le pagine statiche, poiché le pagine cambiano molto poco e non c'è bisogno di un database, le pagine vengono portate al loro stato finale con il metodo di pre-rendering prima di essere inviate al server e vengono inviate a CDN o ad ambienti edge-caching, e da lì vengono servite molto rapidamente. Di recente è diventato molto più semplice produrre questo tipo di pagine con gli strumenti Gatsby e Jekyll. In queste pagine, sia i tempi TTFB che TTI sono piuttosto brevi. Le esigenze di esecuzione JS o di interazione di tali pagine sono molto basse e limitate.
• Rendering ibrido: sebbene abbia senso creare SSR per alcune pagine in base al loro carico di contenuti, ha senso creare alcune pagine ad alto carico con CSR lazy. Sono emersi framework come Next, Nuxt, Nest, Sapper che supportano tali situazioni. Questo framework ha capacità simili adottando i metodi di sviluppo dei componenti Next – React, Nuxt – Vue, Nest – Angular, Sapper – Svelte nello sviluppo del codice.

Riferimenti

• Rendering sul Web
• Differenza tra pagine Web statiche e dinamiche
• Dove dovrebbe essere eseguito il rendering HTML?

È possibile cliccare su questo collegamento per accedere al seguito di questo articolo o ad altri articoli nel gruppo di articoli .