Que fournit Angular SSR (Universal) ?

Question

Accepted Answer

**Angular SSR** (historiquement appelé Angular Universal) rend le HTML de votre application **sur le serveur** pour la requête initiale, au lieu d'envoyer une page vide que le navigateur doit remplir avec JavaScript. Cela améliore le SEO, la performance perçue et le first paint. ## Pourquoi c'est important ```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 ``` Avec SSR, le serveur produit du HTML complet afin que les utilisateurs et les moteurs de recherche obtiennent du contenu réel immédiatement ; Angular attache ensuite les event listeners (hydration) pour le rendre interactif. ## Configuration ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Ceci crée un serveur Node/Express qui rend Angular sur le serveur et envoie le HTML pré-rendu. ## Ce que SSR fournit ```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 — éviter un re-render ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` L'**hydration non-destructive** d'Angular moderne réutilise le DOM rendu par le serveur au lieu de le jeter et de le re-rendre — évitant un scintillement et améliorant les performances. ## Connexe : 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 supporte également le **prerendering** (SSG) des routes au moment de la build pour la livraison la plus rapide possible du contenu statique. ## Réserves ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Pourquoi c'est important Pour les sites riches en contenu, l'e-commerce ou toute application où le **SEO et le fast first paint importent**, une SPA Angular client-only ne suffit pas — les moteurs de recherche et les utilisateurs obtiennent une page vide jusqu'à ce que JS s'exécute. SSR (avec hydration) résout cela en livrant du HTML réel immédiatement, et SSG va plus loin pour le contenu statique. Savoir quand SSR vaut sa complexité ajoutée — et les réserves des API du navigateur — est le jugement architectural clé.