🧠 Comprendre le Server-Side Rendering (SSR) dans Angular 20 : SSR vs CSR vs Pré-rendu

Angular version 20 vient tout juste d'être publiée, et aujourd'hui nous allons parler d’un sujet très demandé par la communauté : le Server-Side Rendering (SSR), l’hydratation, et comment ces concepts s’intègrent dans Angular.
J’aime particulièrement l’hydratation incrémentale dans Angular, et nous y reviendrons en détail.
Il s’agit ici de la première partie d’une série en plusieurs articles. Nous commencerons par comprendre ce qu’est le SSR.

🤔 Qu’est-ce que le Server-Side Rendering (SSR) ?

Lorsque nous parlons de Server-Side Rendering, cela signifie que l’on génère le HTML entièrement rendu côté serveur, à la demande.

💡 Le mot clé ici est “à la demande” – cela signifie que chaque fois qu’un utilisateur accède à une route spécifique, le serveur exécute un processus de rendu complet et retourne le HTML déjà construit au navigateur.

Cela implique une charge supplémentaire sur le serveur, car chaque requête déclenche un nouveau rendu. C’est donc idéal pour les pages dynamiques : par exemple, lorsque vous devez récupérer des données depuis une base de données, les intégrer dans le template, et envoyer le résultat au client.

✅ Avantages du SSR :

• Affichage immédiat du contenu : pas d’écran blanc ou de loader.
• Meilleure expérience utilisateur : le contenu arrive déjà formé.
• SEO amélioré : les moteurs de recherche indexent facilement le contenu rendu.
• Gestion prévisible des appels API : les requêtes peuvent être effectuées directement sur le serveur.

🔁 CSR vs SSR : Une question de contexte

Avec le Client-Side Rendering (CSR), le serveur renvoie uniquement un shell HTML accompagné du bundle JavaScript. Ce n’est qu’ensuite, côté client, que l’application Angular prend le relais pour afficher le contenu réel.

Le CSR excelle dans les applications monopages (SPA), surtout lors des navigations suivantes. Une fois la page initiale chargée, Angular peut charger les routes suivantes de manière asynchrone, offrant une navigation fluide sans rechargement complet.

En revanche, le SSR brille dès la première visite : le contenu est immédiatement visible, ce qui améliore le First Contentful Paint (FCP) et le Largest Contentful Paint (LCP).

⚙️ Créer une application Angular 20 avec SSR

Pour créer une nouvelle application Angular avec SSR activé :

ng new ngv20-demo-app --ssr

Choisissez CSS comme style et désactivez Zoneless mode pour l’instant.

Ce projet inclut automatiquement tous les fichiers nécessaires à l’exécution du SSR via Express.js : - src/main.server.ts - src/server.ts - src/app.routes.ts

Après avoir généré le projet, lancez-le en mode développement :

ng build
npm run serve:ssr

Votre application sera accessible à l’adresse http://localhost:4000.

📂 Structure du projet Angular SSR

Dans votre dossier dist/, vous trouverez deux sous-dossiers : - browser/ : contient les fichiers statiques (HTML, JS, CSS) - server/ : contient le bundle serveur (main.js, server.mjs, etc.)

Le fichier server.ts configure le serveur Express et utilise le package @angular/ssr/node pour rendre l’application côté serveur.

🧪 Tester les différents modes de rendu

Angular v20 permet de configurer facilement le mode de rendu dans le fichier app.routes.ts. Les options sont : - 'client' : rendu uniquement côté client - 'server' : rendu côté serveur à chaque requête - 'prerender' : rendu statique fait à la compilation

Exemple :

{
  path: '',
  component: AppComponent,
  data: { renderMode: 'server' }
}

Ajouter un log dans AppComponent

Ajoutez un log dans ngOnInit pour observer où le composant est initialisé :

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  ngOnInit() {
    console.log('App initialized');
  }
}

🔍 Vérifier le type de rendu

Utilisez "View Page Source" dans votre navigateur pour voir si le HTML provient du serveur ou non.

En mode CSR :

• Vous verrez uniquement un shell HTML (<app-root>).
• Tout le contenu est généré côté client après le chargement de JavaScript.

En mode SSR :

• Le code source affiche le contenu entièrement rendu.
• Un log apparaît à chaque rafraîchissement dans le terminal du serveur.

En mode Pré-rendu :

• Le contenu est également visible dans la source.
• Mais le log ne s’affiche qu’une seule fois : pendant la compilation (ng build).

🛠️ Hydratation incrémentale dans Angular v20

Une nouveauté importante dans Angular v20 est l’hydratation incrémentale.

🔍 Angular v20 Note : L’hydratation incrémentale permet de rendre certaines parties de l’application interactives plus rapidement, sans attendre que toute l’application soit prête.

Au lieu d’hydrater l’application entière d’un coup, Angular peut désormais hydrater progressivement les composants visibles, améliorant ainsi les performances perçues.

🎯 Comment choisir entre SSR, CSR et Pré-rendu ?

| Cas d’utilisation | Mode recommandé | |-------------------|------------------| | Pages dynamiques (blog, produits, profils) | SSR | | Tableaux de bord internes | CSR | | Pages statiques (mentions légales, FAQ) | Pré-rendu | | Sites avec millions de visiteurs | CSR ou Pré-rendu (moins coûteux pour le serveur) |

📘 Prochain article : Déferrement avec defer blocks

Dans le prochain épisode de cette série, nous explorerons les blocs différés (defer blocks), une fonctionnalité puissante d’Angular qui permet de charger certains composants uniquement quand ils sont nécessaires.
Nous verrons comment cela fonctionne avec le SSR et comment cela améliore les temps de chargement initiaux.

💬 Conclusion

Comprendre les différentes stratégies de rendu dans Angular vous donne la liberté de faire des choix éclairés concernant les performances, le référencement et l’expérience utilisateur.

Avec Angular v20, le SSR est plus accessible que jamais. Il n’y a donc aucune raison de ne pas l’utiliser pour les applications publics où le SEO est essentiel.

Restez connecté pour la suite de cette série !