Çfarë ofron Angular SSR (Universal)?

Question

Accepted Answer

**Angular SSR** (historikisht i quajtur Angular Universal) paraqet HTML-in e aplikacionit tuaj **në server** për kërkesën fillestare, në vend që të dërgojë një faqe të zbrazët që shfletuesi duhet të mbushë me JavaScript. Kjo përmirëson SEO, performancën e ndjerë dhe pikturimin e parë. ## Problemi që SSR zgjidh ```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 ``` Me SSR, serveri prodhon HTML të plotë kështu që përdoruesit dhe motorët e kërkimit marrin përmbajtje të vërtetë menjëherë; Angular më pas lidh dëgjuesit e ngjarjeve (hidratimi) për ta bërë atë interaktiv. ## Konfigurimi ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Ky i vendos serverin Node/Express që paraqet Angular në server dhe shërben HTML-in e paraqitur më parë. ## Ajo që SSR ofron ```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 ``` ## Hidratimi — shmangja e ripërtëritjes ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` Hidratimi **jo-shkatërrues** i Angular-it modern përdor përsëri DOM-in e paraqitur nga serveri në vend që ta hedhë poshtë dhe ta ripërtërij — duke shmangur një shkëlqim dhe duke përmirësuar performancën. ## Lidhur: SSG (paraqitje paraprakisht) ```text SSR → render per request (dynamic content, always fresh) SSG → prerender pages at BUILD time (static, fastest) — good for content that rarely changes ``` Angular gjithashtu mbështet rrugë **paraqitjeje paraprakisht** (SSG) në kohën e ndërtimit për shpërndarjen më të shpejtë të mundshme të përmbajtjes statike. ## Paralajmërimet ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Pse është e rëndësishme Për faqe me shumë përmbajtje, e-tregtim ose ndonjë aplikacion ku **SEO dhe pikturimin e shpejtë janë të rëndësishme**, një Angular SPA vetëm-klient nuk mjafton — motorët e kërkimit dhe përdoruesit marrin një faqe të zbrazët derisa JS të ekzekutohet. SSR (me hidratim) e zgjidh këtë duke shpërndarë HTML të vërtetë paraprakisht, dhe SSG shkon më larg për përmbajtjen statike. Dija kur SSR vlen kompleksitetin e tij shtesë — dhe paralajmërimet e API-ve të shfletuesit — është gjykimi kryesor i arkitekturës.