Angular Universal: cos'è, caratteristiche e utilizzo | ELbuild
angular

Angular Universal

Angular Universal è una tecnologia che permette di elaborare un'applicazione Angular sul server e restituire pagine html standard, con una serie di vantaggi soprattuto in termini di SEO e condivisione sui social.

Cos'è Angular Universal?

Angular Universal è una tecnologia di Server Side Rendering per Angular

Angular Universal è una tecnologia che permette il Server Side Rendering delle applicazioni Angular. Una normale app Angular viene interamente scaricata dal brower al momento in cui ne viene richiesta una qualsiasi url e viene quindi eseguita lato client. Nel caso di SSR invece, quando un utente richiede una url di un'app Angular, il server effettua un'elaborazione ed esegue il codice creando una versione statica html della pagina richiesta, che viene trasferita al browser, che solo in seguito carica tutte le funzionalità interattive lato client. Questo processo è vantaggioso in una serie di scenari: permette una miglior ottimizzazione per i motori di ricerca (SEO), fa sì che anche in dispositivi con basse prestazioni o limitata banda si possa visualizzare velocemente una parte del contenuto, facilita l'integrazione con i social e con i sistemi di analisi del traffico e delle azioni degli utenti.

Quando usiamo Angular Universal?

Quali sono i vantaggi del Server Side Rendering?

Non sempre è necessario elaborare l'interfaccia utente lato server, anzi in molti casi, ad esempio per software gestionali o di controllo interni, la normale applicazione one page, scaricata ed eseguita interamente dal browser è la scelta migliore e più performante. Tuttavia, se si vogliono esporre i servizi web al pubblico, il passaggio SSR è necessario. Anche se Google recupera i contenuti caricati lato client con il JavaScript, non è detto che si ottenga la miglior indicizzazione e che si abbiano gli stessi risultati anche su altri motori di ricerca. Inoltre la presenza dei meta tag nelle pagine è indispensabile per condividere in modo efficace i contenuti sui social. In tutti questi casi noi optiamo per utilizzare Angular insieme a Angular Universal in modo da ottenere il massimo dalla presenza dell'applicazione sul web. Per le stesse esigenze possiamo scegliere di usare Nuxt nei progetti Vue.