Mitä Angular SSR (Universal) tarjoaa?

Question

Accepted Answer

**Angular SSR** (historiallisesti kutsuttu Angular Universaliks) renderöi sovelluksesi HTML:n **palvelimella** alkuperäisen pyynnön osalta, sen sijaan että lähettäisit tyhjän sivun, jonka selain on täytettävä JavaScriptillä. Tämä parantaa SEO:ta, näkyvää suorituskykyä ja ensimmäisen maalauksen nopeutta. ## Ongelma, jonka SSR ratkaisee ```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 ``` SSR:n avulla palvelin tuottaa täydellisen HTML:n, joten käyttäjät ja hakukoneet saavat oikean sisällön heti; Angular liittää sen jälkeen tapahtumakuuntelijat (hydration) tekemään siitä interaktiivisen. ## Asennuksen tekeminen ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Tämä luo Node/Express-palvelimen, joka renderöi Angularia palvelimella ja palvelee esiprosessoitua HTML:ää. ## Mitä SSR tarjoaa ```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 — uudelleenrenderöinnin välttäminen ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` Moderni Angularin **ei-tuhoava hydration** käyttää uudelleen palvelimella renderöityä DOM:ia sen sijaan, että heittäisi sen pois ja renderöisi uudelleen — välttäen vilkkumisen ja parantaen suorituskykyä. ## Liittyvä: 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 tukee myös reititysten **esiprosessointia** (SSG) rakentamisen aikana staattisen sisällön nopeinta toimittamista varten. ## Varoitukset ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Miksi se on tärkeää Sisältöraskaille sivustoille, verkkokaupalle tai millä tahansa sovellukselle, jossa **SEO ja nopea ensimmäinen maalaus ovat tärkeitä**, vain asiakkaalla suoritettava Angular SPA on riittämätön — hakukoneet ja käyttäjät saavat tyhjän sivun, kunnes JS suoritetaan. SSR (hydrationin kanssa) ratkaisee tämän toimittamalla oikean HTML:n etukäteen, ja SSG menee vielä pidemmälle staattisen sisällön osalta. Sen ymmärtäminen, milloin SSR on sen lisääntyneen monimutkaisuuden arvoinen — ja selainten rajapinnan varoitukset — on avaintekijä arkkitehtuurin päätöksessä.