Apa sing duweni Angular SSR (Universal)?

Question

IT Interview Practice · Accepted Answer

**Angular SSR** (kanthi jeneng historical Angular Universal) ngrenderake HTML appmu **ing server** kanggo request awal, tinimbang ngirim halaman kosong sing kudu isien browser kanthi JavaScript. Iki nambah SEO, performance sing dipersepsikake, lan first paint. ## Masalah sing dirampungake 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 ``` Kanggo SSR, server ngasilake HTML lengkap supaya user lan search engine entuk konten nyata langsung-langsung; Angular banjur nggantel event listener (hydration) kanggo gawe interaktif. ## Nata-nate ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Iki nggawe server Node/Express sing ngrenderake Angular ing server lan nglayani HTML sing wis dirender. ## Apa sing duweni 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 ``` ## Hidrasyon — nyingkiri re-render ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` Angular modern **non-destructive hydration** nganggo manèh DOM sing dirender server tinimbang mbukak lan ngrenderi manèh — nyingkiri kilatan lan nambah performance. ## Sing gegandhengan: 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 uga ndhukung **prerendering** (SSG) rute ing wektu build kanggo pengiriman konten statis sing paling cepet. ## Peringatan ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Mengapa iki penting Kanggo situs konten luwes, e-commerce, utawa aplikasi apa pun ing mana **SEO lan fast first paint iku penting**, client-only Angular SPA kurang cukup — search engine lan user entuk halaman kosong nganti JS nelakokake. SSR (kanthi hydration) ngrampungi iki kanthi ngilangake HTML nyata luwes, lan SSG lumapar manèh kanggo konten statis. Duduk kapan SSR layak keruwetane — lan peringatan browser-API — iku pungkasan kanggo perkara arsitektur.

Masalah sing dirampungake SSR

Nata-nate

Apa sing duweni SSR

Hidrasyon — nyingkiri re-render

Sing gegandhengan: SSG (prerendering)

Peringatan

Mengapa iki penting

Pitakon sing gegandhengan