Apakah yang disediakan oleh Angular SSR (Universal)?

Question

Accepted Answer

**Angular SSR** (secara historis disebut Angular Universal) merender HTML aplikasi anda **di server** untuk permintaan awal, daripada mengirim halaman kosong yang harus diisi browser dengan JavaScript. Ini meningkatkan SEO, kinerja yang dirasakan, dan cat pertama. ## Masalah yang diselesaikan 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 ``` Dengan SSR, server menghasilkan HTML lengkap sehingga pengguna dan mesin pencari mendapatkan konten nyata langsung; Angular kemudian melampirkan pendengar acara (hidrasi) untuk membuatnya interaktif. ## Menyiapkannya ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Ini menciptai server Node/Express yang merender Angular di server dan melayani HTML yang telah 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 ``` ## Hidrasi — menghindari render ulang ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` **Hidrasi non-destruktif** Angular modern menggunakan kembali DOM yang dirender server daripada membuangnya dan merender ulang — menghindari flickering dan meningkatkan kinerja. ## Terkait: SSG (pra-rendering) ```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 **pra-rendering** (SSG) rute pada waktu 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 hal ini penting Untuk situs yang kaya konten, e-commerce, atau aplikasi apa pun di mana **SEO dan cat pertama cepat penting**, Angular SPA saja klien kurang memadai — mesin pencari dan pengguna mendapatkan halaman kosong hingga JS dijalankan. SSR (dengan hidrasi) menyelesaikan ini dengan memberikan HTML nyata sejak awal, dan SSG bahkan lebih jauh untuk konten statis. Mengetahui kapan SSR layak untuk kompleksitas tambahannya — dan peringatan API browser — adalah penilaian arsitektur kunci.