Angular Academy · Leçon

Routes serveur et modes de rendu

Configurez le prérendu, le SSR et le CSR pour chaque route

Routes serveur et modes de rendu est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Une seule méthode ne convient pas à toutes les situations

Toutes les routes ne doivent pas être rendues de la même manière. Angular SSR vous permet d’attribuer un mode de rendu à chaque route : rendu côté serveur, rendu côté client ou prérendu au moment de la compilation.

Les trois modes

RenderMode.Server effectue le rendu à chaque requête, RenderMode.Client effectue le rendu uniquement dans le navigateur (CSR) et RenderMode.Prerender génère du HTML statique au moment de la compilation (SSG).

Configuration des routes serveur

Définissez un tableau ServerRoute[] associant les chemins aux modes de rendu, puis fournissez-le avec provideServerRouting dans la configuration serveur.

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  { path: '', renderMode: RenderMode.Prerender },
  { path: 'dashboard', renderMode: RenderMode.Client },
  { path: '**', renderMode: RenderMode.Server }
];

Mettre tout en place

Enregistrez les routes dans la configuration de l’application serveur afin que le moteur SSR sache comment traiter chaque chemin.

// app.config.server.ts
import { provideServerRouting } from '@angular/ssr';

providers: [
  provideServerRendering(),
  provideServerRouting(serverRoutes)
]

Quand utiliser le prérendu

Choisissez Prerender pour les pages publiques stables : accueil, présentation et documentation. Elles sont compilées une seule fois en HTML, fournies instantanément depuis un CDN, sans coût serveur par requête.

Quand utiliser le serveur

Choisissez Server pour les pages dont le contenu change à chaque requête ou selon l’utilisateur, mais qui nécessitent tout de même le référencement ou un premier affichage rapide, comme une page produit indiquant le stock en temps réel.

Quand utiliser le client

Choisissez Client pour les pages privées et très interactives où le référencement et le premier affichage comptent peu, comme un tableau de bord nécessitant une authentification. Le serveur envoie une coquille et le navigateur effectue le rendu.

Prérendre des paramètres dynamiques

Pour les routes paramétrées, vous devez indiquer au prérendeur quels paramètres générer en renvoyant une liste avec getPrerenderParams.

{
  path: 'product/:id',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    const ids = await fetchProductIds();
    return ids.map(id => ({ id }));
  }
}

Solution de repli pour le prérendu

Les paramètres qui n’ont pas été prérendus peuvent utiliser le rendu côté serveur ou côté client au moment de l’exécution. Vous pouvez ainsi prérendre les éléments populaires et rendre les autres à la demande.

En-têtes et codes d’état par route

Les routes serveur peuvent définir des en-têtes de réponse et des codes d’état, ce qui est utile pour la politique de mise en cache ou pour renvoyer une 404 depuis un gestionnaire de route introuvable.

{
  path: 'old-page',
  renderMode: RenderMode.Server,
  headers: { 'Cache-Control': 'no-store' }
}

Mélanger judicieusement les modes

Une application réelle combine les modes : prérendez les pages marketing, rendez côté serveur les pages dynamiques essentielles au référencement et rendez côté client l’application protégée par une connexion. Vous optimisez ainsi simultanément les coûts et les performances.

Vérification rapide

Vérifiez vos connaissances sur les modes de rendu.

Récapitulatif

Vous avez configuré le rendu par route avec ServerRoute[] et provideServerRouting : Prerender pour les pages publiques stables, Server pour les pages dynamiques essentielles au référencement et Client pour les pages privées et interactives, y compris les paramètres de prérendu pour les routes dynamiques.

Questions Fréquemment Posées

La leçon « Routes serveur et modes de rendu » est-elle gratuite ?

Oui — le texte complet de « Routes serveur et modes de rendu » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Routes serveur et modes de rendu » ?

Configurez le prérendu, le SSR et le CSR pour chaque route Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Routes serveur et modes de rendu » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy