Mit nyújt az Angular SSR (Universal)?

Question

Accepted Answer

Az **Angular SSR** (történetileg Angular Universal-nak hívott) az alkalmazás HTML-jét **a szerveren** renderi az első kérelemhez, ahelyett hogy üres oldalat küldene, amelyet a böngészőnek JavaScripttel kell feltöltenie. Ez javítja az SEO-t, az érzékelt teljesítményt és az első festést. ## Miért fontos ```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 ``` Az SSR-rel a szerver teljes HTML-t termel, így a felhasználók és a keresőmotorok azonnal valódi tartalomhoz jutnak; az Angular ezután eseményfigyelőket (hidratáció) csatol, hogy interaktívvá tegyék. ## Beállítás ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Ez egy Node/Express szervert állít fel, amely az Angular-t a szerveren rendereli és az előre renderelt HTML-t szolgáltatja. ## Mit nyújt az 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 ``` ## Hidratáció — az újrarenderelés elkerülése ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` A modern Angular **nem destruktív hidratációja** újra felhasználja a szerveren renderelt DOM-ot, ahelyett hogy eldobná és újra renderelné — elkerülve a villanást és javítva a teljesítményt. ## Kapcsolódó: SSG (előrenderlés) ```text SSR → render per request (dynamic content, always fresh) SSG → prerender pages at BUILD time (static, fastest) — good for content that rarely changes ``` Az Angular az **előrenderlést** (SSG) az építés ideje alatt is támogatja a statikus tartalom leggyorsabb lehetséges kézbesítéséhez. ## Figyelmeztetések ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Miért fontos Tartalom-gazdag webhelyek, e-kereskedelem vagy bármely olyan alkalmazás számára, ahol az **SEO és a gyors első festés számít**, az csak kliens oldali Angular SPA nem elegendő — a keresőmotorok és a felhasználók üres oldalt kapnak, amíg a JavaScript nem fut. Az SSR (hidratációval) ezt azáltal oldja meg, hogy azonnal valódi HTML-t szállít, az SSG pedig továbbmegy a statikus tartalomra. Annak ismerete, hogy az SSR mikor éri meg az extra összetettségét — és a böngésző-API figyelmeztetéseit — a legfontosabb architekturális döntés.