Co zapewnia Angular SSR (Universal)?

Question

Accepted Answer

**Angular SSR** (historycznie zwane Angular Universal) renderuje HTML aplikacji **na serwerze** dla początkowego żądania, zamiast wysyłać pustą stronę, którą przeglądarka musi wypełnić JavaScript-em. Poprawia to SEO, postrzeganą wydajność i first paint. ## Problem rozwiązywany przez 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 ``` Z SSR serwer produkuje pełny HTML, dzięki czemu użytkownicy i wyszukiwarki natychmiast otrzymują rzeczywistą zawartość; Angular następnie dołącza odbiorniki zdarzeń (hydration), aby uczynić ją interaktywną. ## Konfiguracja ```bash ng add @angular/ssr # adds server rendering to an existing app ``` To tworzy serwer Node/Express, który renderuje Angular na serwerze i serwuje wstępnie renderowany HTML. ## Co zapewnia 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 ``` ## Hydration — unikanie ponownego renderowania ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` Nowoczesna **destrukcyjnie nieniszcząca hydration** Angular-a ponownie wykorzystuje renderowany na serwerze DOM zamiast go wyrzucać i ponownie renderować — unikając migotania i poprawiając wydajność. ## Powiązane: 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 obsługuje również **prerendering** (SSG) tras w czasie budowania dla najszybszego możliwego dostarczenia zawartości statycznej. ## Zastrzeżenia ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Dlaczego to ważne Dla witryn bogatych w zawartość, e-commerce lub dowolnej aplikacji, gdzie **SEO i szybki first paint są ważne**, samotna aplikacja Angular SPA nie wystarczy — wyszukiwarki i użytkownicy otrzymują pustą stronę, dopóki nie zostanie wykonany JS. SSR (z hydration) rozwiązuje to problem, dostarczając rzeczywisty HTML od razu, a SSG idzie dalej dla zawartości statycznej. Wiedza o tym, kiedy SSR jest warte dodatkowej złożoności — i zastrzeżenia dotyczące interfejsów API przeglądarki — jest kluczową decyzją architektoniczną.