Cosa fornisce Angular SSR (Universal)?

Question

Accepted Answer

**Angular SSR** (storicamente chiamato Angular Universal) renderizza l'HTML della tua app **sul server** per la richiesta iniziale, invece di spedire una pagina vuota che il browser deve riempire con JavaScript. Questo migliora il SEO, le prestazioni percepite e il primo paint. ## Il problema che SSR risolve ```text Client-side rendering (default SPA): Server sends empty + JS bundle → browser downloads & runs Angular → THEN content appears → slow first paint; crawlers/social bots may see a blank page Server-side rendering: Server runs Angular, sends fully-rendered HTML → content visible immediately → Angular "hydrates" it for interactivity ``` Con SSR, il server produce HTML completo in modo che gli utenti e i motori di ricerca ottengono contenuti reali subito; Angular poi attacca i listener degli eventi (idratazione) per renderlo interattivo. ## Configurarlo ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Questo scaffolda un server Node/Express che renderizza Angular sul server e serve l'HTML pre-renderizzato. ## Cosa fornisce SSR ```text ✓ Better SEO — crawlers get full content (critical for content/marketing sites) ✓ Faster First Contentful Paint — visible content before JS loads ✓ Better social sharing — link previews see real meta tags/content ✓ Improved performance on slow devices/networks ``` ## Idratazione — evitare un re-render ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` L'**idratazione non-distruttiva** moderna di Angular riusa il DOM renderizzato dal server invece di buttarlo via e ri-renderizzare — evitando un flicker e migliorando le prestazioni. ## Correlato: SSG (prerendering) ```text SSR → render per request (dynamic content, always fresh) SSG → prerender pages at BUILD time (static, fastest) — good for content that rarely changes ``` Angular supporta anche il **prerendering** (SSG) delle rotte al momento della build per la consegna più veloce possibile di contenuto statico. ## Avvertenze ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Perché è importante Per siti ricchi di contenuti, e-commerce, o qualsiasi app dove **SEO e fast first paint importano**, un Angular SPA solo client non è sufficiente — i motori di ricerca e gli utenti ottengono una pagina bianca fino a quando JS non viene eseguito. SSR (con idratazione) risolve questo fornendo HTML reale subito, e SSG va ancora più lontano per contenuto statico. Sapere quando SSR vale la sua complessità aggiunta — e le avvertenze delle API del browser — è il giudizio architetturale chiave.