Što pruža Angular SSR (Universal)?

Question

Accepted Answer

**Angular SSR** (povijesno nazvan Angular Universal) ispisuje HTML vaše aplikacije **na serveru** za početni zahtjev, umjesto slanja prazne stranice koju preglednik mora ispuniti s JavaScriptom. To poboljšava SEO, percipiranu izvedbu i prvi ispis. ## Zašto je to važno ```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 ``` S SSR-om, server proizvodi potpun HTML tako da korisnici i tražilice odmah dobiju pravi sadržaj; Angular zatim pričvršćuje slušače događaja (hidratacija) kako bi ga učinio interaktivnim. ## Postavljanje ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Ovo postavi Node/Express server koji ispisuje Angular na serveru i služi unaprijed ispisan HTML. ## Što SSR pruža ```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 ``` ## Hidratacija — izbjegavanje ponovnog ispisa ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` Moderna Angular-ova **nedestruktivna hidratacija** ponovno koristi server-ispisan DOM umjesto da ga baci i ponovno ispopuni — izbjegavajući bljesk i poboljšavajući izvedbu. ## Srodno: 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 također podržava **prerendering** (SSG) ruta tijekom gradnje za najbrže moguće dostavljanje statičkog sadržaja. ## Upozorenja ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Zašto je to važno Za sadržajem bogate web-stranice, e-commerce ili bilo koju aplikaciju gdje su **SEO i brz prvi ispis važni**, samo klijent Angular SPA nije dovoljna — tražilice i korisnici dobiju praznu stranicu dok se JavaScript ne izvrši. SSR (s hidratacijom) to rješava dostavljanjem stvarnog HTML-a odmah, a SSG ide dalje za statički sadržaj. Znati kada je SSR vrijedan svoje dodatne složenosti — i nedostatke API-ja preglednika — je ključna arhitekturna odluka.