Apa yang disediakan Angular SSR (Universal)?

Question

Accepted Answer

**Angular SSR** (secara historis disebut Angular Universal) merender HTML aplikasi Anda **di server** untuk permintaan awal, bukan mengirim halaman kosong yang harus diisi browser dengan JavaScript. Ini meningkatkan SEO, performa yang dirasakan, dan first paint. ## Mengapa ini penting ```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 ``` Dengan SSR, server menghasilkan HTML lengkap sehingga pengguna dan mesin pencari langsung mendapat konten nyata; Angular kemudian menghubungkan pendengar acara (hidratasi) untuk membuatnya interaktif. ## Mengaturnya ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Ini membuat perancah server Node/Express yang merender Angular di server dan melayani HTML yang dirender sebelumnya. ## Apa yang disediakan 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 ``` ## Hidratasi — menghindari render ulang ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` Hidratasi **non-destruktif** Angular modern menggunakan kembali DOM yang dirender server daripada membuangnya dan merender ulang — menghindari kedipan dan meningkatkan performa. ## Terkait: 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 juga mendukung **prerendering** (SSG) rute saat build untuk pengiriman konten statis tercepat. ## Peringatan ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Mengapa ini penting Untuk situs kaya konten, e-commerce, atau aplikasi apa pun di mana **SEO dan first paint cepat penting**, SPA Angular client-only tidak cukup — mesin pencari dan pengguna mendapat halaman kosong hingga JS dijalankan. SSR (dengan hidratasi) menyelesaikan ini dengan mengirim HTML asli di depan, dan SSG melangkah lebih jauh untuk konten statis. Mengetahui kapan SSR layak dengan kompleksitasnya yang ditambahkan — dan peringatan API browser — adalah keputusan arsitektur kunci.