Co poskytuje Angular SSR (Universal)?

Question

Accepted Answer

**Angular SSR** (historicky nazývaný Angular Universal) renderuje HTML vaší aplikace **na serveru** pro iniciální požadavek, místo aby se poslala prázdná stránka, kterou musí prohlížeč vyplnit JavaScriptem. To zlepšuje SEO, vnímané výkony a první vykreslení. ## Problém, který SSR řeší ```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 server vyprodukuje kompletní HTML, takže uživatelé a vyhledávače dostanou skutečný obsah hned; Angular pak připojí posluchače událostí (hydration), aby to bylo interaktivní. ## Nastavení ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Toto vytvoří Node/Express server, který renderuje Angular na serveru a poskytuje předrenderované HTML. ## Co SSR poskytuje ```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 — zabránění novému vykreslení ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` Moderní Angular's **non-destructive hydration** znovu použije server-renderovaný DOM místo jeho zahození a znovurendering — aby se zabránilo blikání a zlepšil se výkon. ## Související: 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 také podporuje **prerendering** (SSG) tras v čase buildu pro nejrychlejší možné doručení statického obsahu. ## Výhrada ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Proč to záleží Pro obsahem bohaté weby, e-commerce nebo jakoukoli aplikaci, kde **SEO a rychlé první vykreslení záleží**, clientský Angular SPA není dostačující — vyhledávače a uživatelé dostanou prázdnou stránku až do spuštění JS. SSR (s hydration) to řeší doručením skutečného HTML dopředu a SSG jde ještě dále pro statický obsah. Vědět, kdy je SSR stojí za přidanou složitost — a co jsou úskalí browser API — je klíčový architektonický soud.