Angular SSR (Universal) ne sağlar?

Question

Accepted Answer

**Angular SSR** (geçmişte Angular Universal olarak adlandırılır) uygulamanızın HTML'ini ilk istek için **sunucuda** render eder; tarayıcının JavaScript ile doldurması gereken boş bir sayfa göndermek yerine. Bu, SEO, algılanan performans ve ilk boyamayı iyileştirir. ## SSR'nin çözdüğü sorun ```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 ile sunucu tam HTML üretir; böylece kullanıcılar ve arama motorları hemen gerçek içerik alırlar; Angular daha sonra olay dinleyicilerini (hydration) ekleyerek etkileşimli hale getirir. ## Neden önemli ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Bu, sunucuda Angular render eden ve önceden render edilmiş HTML'yi sunan bir Node/Express sunucusunu oluşturur. ## SSR'nin sağladığı ```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 — yeniden render'ı önlemek ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` Modern Angular'ın **yıkıcı olmayan hydration** özelliği, sunucu tarafından render edilen DOM'u atmak ve yeniden render etmek yerine yeniden kullanır — titreşimi önler ve performansı iyileştirir. ## İlgili: SSG (ön render) ```text SSR → render per request (dynamic content, always fresh) SSG → prerender pages at BUILD time (static, fastest) — good for content that rarely changes ``` Angular ayrıca statik içeriğin en hızlı şekilde iletilmesi için yapı zamanında rotaların **ön render**inin (SSG) yapılmasını destekler. ## Uyarılar ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Neden önemli İçerik bakımından ağır siteler, e-ticaret veya **SEO ve hızlı ilk boyamanın önemli** olduğu herhangi bir uygulama için, yalnızca istemci tarafındaki Angular SPA yetersizdir — arama motorları ve kullanıcılar JS yürütülene kadar boş bir sayfa alırlar. SSR (hydration ile) bunu başından itibaren gerçek HTML sunarak çözer ve SSG statik içerik için daha ileri gider. SSR'nin eklenen karmaşıklığını haklı çıkaracak zamana karar vermek — ve tarayıcı API uyarılarını göz önünde bulundurmak — temel mimari yargıdır.