Ce oferă Angular SSR (Universal)?

Question

Accepted Answer

**Angular SSR** (denumit istoric Angular Universal) renderează HTML-ul aplicației dvs. **pe server** pentru cererea inițială, în loc să trimiteți o pagină goală pe care browserul trebuie să o completeze cu JavaScript. Aceasta îmbunătățește SEO-ul, performanța percepută și first paint. ## Problema pe care o rezolvă SSR ```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 ``` Cu SSR, serverul produce HTML complet, astfel încât utilizatorii și motoarele de căutare obțin conținut real imediat; Angular apoi atașează ascultatori de evenimente (hydration) pentru a-l face interactiv. ## Configurarea acestuia ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Aceasta creează un server Node/Express care renderează Angular pe server și servește HTML-ul pre-randare. ## Ce oferă 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 ``` ## Hydration — evitând o noua redare ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` **Hydration non-distructivă** a Angular-ului modern reutilizează DOM-ul renderizat pe server în loc să-l arunce și să-l redea din nou — evitând o sclipire și îmbunătățind performanța. ## Asociat: 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 suportă, de asemenea, **prerendering** (SSG) rute la build time pentru cea mai rapidă livrare posibilă a conținutului static. ## Avertismente ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## De ce este important Pentru site-uri cu mult conținut, e-commerce sau orice aplicație în care **SEO și fast first paint conteaza**, o SPA Angular doar pentru client rămâne în urmă — motoarele de căutare și utilizatorii obțin o pagină goală până când JS se execută. SSR (cu hydration) rezolvă aceasta prin furnizarea HTML-ului real imediat, iar SSG merge mai departe pentru conținut static. Știi când SSR merită complexitatea sa adăugată — și avertismentele API-ului browserului — este judecata arhitecturală cheie.