SSR

CSR

Episodio IV

Una sola pagina

Cosa succede in una single page application

Quando carichiamo una Single Page Application (SPA) nel browser, avvengono una serie di operazioni:�

• Download dell'HTML, JS, CSS e di tutte le risorse iniziali

Cosa succede in una single page application

Quando carichiamo una Single Page Application (SPA) nel browser, avvengono una serie di operazioni:�

• Download dell'HTML, JS, CSS e di tutte le risorse iniziali
• Parsing ed esecuzione del Javascript

Cosa succede in una single page application

Quando carichiamo una Single Page Application (SPA) nel browser, avvengono una serie di operazioni:�

• Download dell'HTML, JS, CSS e di tutte le risorse iniziali
• Parsing ed esecuzione del Javascript
• Avvio del framework, con conseguente bootstrap dell'app

Cosa succede in una single page application

Quando carichiamo una Single Page Application (SPA) nel browser, avvengono una serie di operazioni:�

• Download dell'HTML, JS, CSS e di tutte le risorse iniziali
• Parsing ed esecuzione del Javascript
• Avvio del framework, con conseguente bootstrap dell'app
• Reindirizzamento interno al framework in base al routing

Cosa succede in una single page application

Quando carichiamo una Single Page Application (SPA) nel browser, avvengono una serie di operazioni:�

• Download dell'HTML, JS, CSS e di tutte le risorse iniziali
• Parsing ed esecuzione del Javascript
• Avvio del framework, con conseguente bootstrap dell'app
• Reindirizzamento interno al framework in base al routing
• Rendering del componente pagina adeguato

Cosa succede in una single page application

Quando carichiamo una Single Page Application (SPA) nel browser, avvengono una serie di operazioni:�

• Download dell'HTML, JS, CSS e di tutte le risorse iniziali
• Parsing ed esecuzione del Javascript
• Avvio del framework, con conseguente bootstrap dell'app
• Reindirizzamento interno al framework in base al routing
• Rendering del componente pagina adeguato
• Eventuali chiamate API per ottenere i dati

Cosa succede in una single page application

Quando carichiamo una Single Page Application (SPA) nel browser, avvengono una serie di operazioni:�

• Download dell'HTML, JS, CSS e di tutte le risorse iniziali
• Parsing ed esecuzione del Javascript
• Avvio del framework, con conseguente bootstrap dell'app
• Reindirizzamento interno al framework in base al routing
• Rendering del componente pagina adeguato
• Eventuali chiamate API per ottenere i dati
• Aggiornamento della UI della pagina in base ai dati ottenuti

Episodio V

Il server colpisce ancora

Cosa succede in una server side application

Quando carichiamo una Server Side Rendered App (SSR) nel server e nel browser, avvengono una serie di operazioni:

​

• Il server esegue il rendering della pagina richiesta,�generando HTML già pronto con i dati (se disponibili)

Cosa succede in una server side application

Quando carichiamo una Server Side Rendered App (SSR) nel server e nel browser, avvengono una serie di operazioni:

​

• Il server esegue il rendering della pagina richiesta,�generando HTML già pronto con i dati (se disponibili)
• Invio della risposta HTML al browser

Cosa succede in una server side application

Quando carichiamo una Server Side Rendered App (SSR) nel server e nel browser, avvengono una serie di operazioni:

​

• Il server esegue il rendering della pagina richiesta,�generando HTML già pronto con i dati (se disponibili)
• Invio della risposta HTML al browser
• Il browser riceve l'HTML renderizzato, lo interpreta e lo mostra all'utente

Cosa succede in una server side application

Quando carichiamo una Server Side Rendered App (SSR) nel server e nel browser, avvengono una serie di operazioni:

​

• Il server esegue il rendering della pagina richiesta,�generando HTML già pronto con i dati (se disponibili)
• Invio della risposta HTML al browser
• Il browser riceve l'HTML renderizzato, lo interpreta e lo mostra all'utente
• Download delle risorse statiche (JS, CSS, immagini, ecc.)

Cosa succede in una server side application

Quando carichiamo una Server Side Rendered App (SSR) nel server e nel browser, avvengono una serie di operazioni:

​

• Il server esegue il rendering della pagina richiesta,�generando HTML già pronto con i dati (se disponibili)
• Invio della risposta HTML al browser
• Il browser riceve l'HTML renderizzato, lo interpreta e lo mostra all'utente
• Download delle risorse statiche (JS, CSS, immagini, ecc.)
• Il framework si avvia anche nel browser, prende il controllo dell’app già renderizzata e la rende interattiva (idratazione)

ng add @angular/ssr

Cosa ci fa il server Express dentro ad Angular

Questo file è il server-side entry point per un'app Angular, che abilita il Server-Side Rendering (SSR) usando Express.js.

�

• Crea un server Express.js
• Serve i file statici generati dalla build Angular
• Esegue il rendering lato server per le route Angular
• Avvia il server sulla porta fornita o su 4000

​

​

constructor() {

afterNextRender(() => {

this.userImg = sessionStorage.getItem('userAvatar');

this.userName = sessionStorage.getItem('userName');

});

}

​

constructor() {

afterRenderEffect(() => {

const color = this.color();

document.body.style.background = color;

});

}

afterRenderEffect

afterNextRender

live demo score lighthouse

LIVE DEMO

TODO

I principali vantaggi delle server side app

�

• ⚡ Caricamento iniziale più veloce (soprattutto su connessioni lente)

I principali vantaggi delle server side app

�

• ⚡ Caricamento iniziale più veloce (soprattutto su connessioni lente)
• 🔍 SEO migliorato (i motori di ricerca vedono subito l’HTML completo)

I principali vantaggi delle server side app

�

• ⚡ Caricamento iniziale più veloce (soprattutto su connessioni lente)
• 🔍 SEO migliorato (i motori di ricerca vedono subito l’HTML completo)
• 📊 Web Vitals migliori (es. LCP, TTI)

I principali vantaggi delle server side app

�

• ⚡ Caricamento iniziale più veloce (soprattutto su connessioni lente)
• 🔍 SEO migliorato (i motori di ricerca vedono subito l’HTML completo)
• 📊 Web Vitals migliori (es. LCP, TTI)
• 🧩 Contenuti visibili prima del caricamento JS completo

I principali vantaggi delle server side app

�

• ⚡ Caricamento iniziale più veloce (soprattutto su connessioni lente)
• 🔍 SEO migliorato (i motori di ricerca vedono subito l’HTML completo)
• 📊 Web Vitals migliori (es. LCP, TTI)
• 🧩 Contenuti visibili prima del caricamento JS completo
• 🛠️ Ottimo per app con contenuti dinamici condivisibili (es. articoli, prodotti)

Episodio VI

Il ritorno dei siti statici

Cosa succede in una static site generated app

Quando carichiamo una Static Site Generated App (SSG) nel browser, avvengono una serie di operazioni:

​

• Il server (o CDN) restituisce un file HTML statico, generato in fase di build

​

Cosa succede in una static site generated app

Quando carichiamo una Static Site Generated App (SSG) nel browser, avvengono una serie di operazioni:

​

• Il server (o CDN) restituisce un file HTML statico, generato in fase di build
• Il browser riceve l’HTML renderizzato, lo interpreta e lo mostra all’utente

​

Cosa succede in una static site generated app

Quando carichiamo una Static Site Generated App (SSG) nel browser, avvengono una serie di operazioni:

​

• Il server (o CDN) restituisce un file HTML statico, generato in fase di build
• Il browser riceve l’HTML renderizzato, lo interpreta e lo mostra all’utente
• Download delle risorse statiche (JS, CSS, immagini, ecc.)

​

Cosa succede in una static site generated app

Quando carichiamo una Static Site Generated App (SSG) nel browser, avvengono una serie di operazioni:

​

• Il server (o CDN) restituisce un file HTML statico, generato in fase di build
• Il browser riceve l’HTML renderizzato, lo interpreta e lo mostra all’utente
• Download delle risorse statiche (JS, CSS, immagini, ecc.)
• Il framework prende il controllo della pagina e la rende interattiva

​

Cosa succede in una static site generated app

Quando carichiamo una Static Site Generated App (SSG) nel browser, avvengono una serie di operazioni:

​

• Il server (o CDN) restituisce un file HTML statico, generato in fase di build
• Il browser riceve l’HTML renderizzato, lo interpreta e lo mostra all’utente
• Download delle risorse statiche (JS, CSS, immagini, ecc.)
• Il framework prende il controllo della pagina e la rende interattiva
• Navigazione interna in modalità SPA, con routing gestito sul client

​

Cosa succede in una static site generated app

Quando carichiamo una Static Site Generated App (SSG) nel browser, avvengono una serie di operazioni:

​

• Il server (o CDN) restituisce un file HTML statico, generato in fase di build
• Il browser riceve l’HTML renderizzato, lo interpreta e lo mostra all’utente
• Download delle risorse statiche (JS, CSS, immagini, ecc.)
• Il framework prende il controllo della pagina e la rende interattiva
• Navigazione interna in modalità SPA, con routing gestito sul client
• Eventuali chiamate API per aggiornare o arricchire i dati in fase client

ng add @angular/ssr

​

/details/6526cb4e57e3ec956179e70f

/details/6526b9bb57e3ec956179e6ee

/details/6526c07057e3ec956179e701

/details/6527d9e257e3ec956179e739

/details/651fdae9bd3ab9d0545629e7

static-routes.txt

live demo score lighthouse

LIVE DEMO

TODO

I principali vantaggi delle static site generated app

�

• 🚀 Performance top (HTML già pronto, servito come un file statico)

​

I principali vantaggi delle static site generated app

�

• 🚀 Performance top (HTML già pronto, servito come un file statico)
• 🔐 Sicurezza maggiore (meno logica lato server esposta)

​

I principali vantaggi delle static site generated app

�

• 🚀 Performance top (HTML già pronto, servito come un file statico)
• 🔐 Sicurezza maggiore (meno logica lato server esposta)
• 💰 Costi di hosting più bassi (puoi usare CDN, niente server)

​

I principali vantaggi delle static site generated app

�

• 🚀 Performance top (HTML già pronto, servito come un file statico)
• 🔐 Sicurezza maggiore (meno logica lato server esposta)
• 💰 Costi di hosting più bassi (puoi usare CDN, niente server)
• ⚙️ Scalabilità altissima (serve solo file statici, quindi regge tanti utenti)

​

I principali vantaggi delle static site generated app

�

• 🚀 Performance top (HTML già pronto, servito come un file statico)
• 🔐 Sicurezza maggiore (meno logica lato server esposta)
• 💰 Costi di hosting più bassi (puoi usare CDN, niente server)
• ⚙️ Scalabilità altissima (serve solo file statici, quindi regge tanti utenti)
• 🔍 SEO friendly (contenuto già presente al momento del caricamento)

Episodio I

L'evento fantasma

event replay

TODO

Episodio II�L'attacco dei rendering ibridi

hybrid rendering

TODO

Episodio III

La vendetta delle deferrable views

deferrable views

TODO

Written and Directed by�DAVIDE PASSAFARO

Davide Passafaro�Senior Frontend Engineer, awork

Davide Passafaro

​

• Senior Frontend Engineer @ �
• Google Developer Expert in Angular�
• GDG Roma Città Organizer

​

• Codemotion Contributor - Ancora Livello 1 ...

davide-passafaro

davidepassafaro

DavidePassafaro

Let’s get in touch!

Don't forget to rate the talk!

Thanks!

Episode I – The Phantom Hydration

Episode II – Attack of the Hybrid Rendering �Episode III – Revenge of the Islands

�Time skip - Other frameworks rule the web galaxy� �Episode IV – A New Framework

Episode V – The Server Strikes Back

Episode VI – Return of the Static Site

Nonostante l’adozione massiccia del CSR,

le prestazioni sono minacciate da bundle sempre più grandi,

e i crawler delle ricerche hanno stanato

le SPA dalle loro basi nascoste nel DOM.

​

Dopo essere sfuggiti alla temibile flotta

delle metriche Web Vitals,

un gruppo di sviluppatori guidati da Angular

ha trovato rifugio sul freddo e remoto pianeta Universal.

​

Ma il malvagio Lord LCP Fener,

ossessionato dall’idea di trovare il Time To Interactive,

ha inviato migliaia di sonde lighthouse

fino ai confini più remoti del web...