Angular Academy · Leçon

Configurer le SSR d’Angular

Ajoutez le SSR avec le CLI Angular

Configurer le SSR d’Angular est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

Ajouter le SSR

Le moyen le plus rapide d’activer le SSR consiste à utiliser le schéma ng add @angular/ssr. Celui-ci configure pour vous la compilation côté serveur, un serveur basé sur Express et l’hydratation.

// terminal
// ng add @angular/ssr

Nouveaux projets

Lors de la création d’une nouvelle application, vous pouvez activer directement l’option SSR afin que le projet soit prêt pour le SSR dès le départ.

// ng new my-app --ssr

Ce que le schéma ajoute

Il ajoute un server.ts (serveur Express), un démarrage main.server.ts, un fichier app.config.server.ts, met à jour angular.json avec les options serveur et active l’hydratation dans la configuration de l’application.

provideServerRendering

La configuration de l’application serveur fournit le moteur SSR via provideServerRendering(), fusionné avec votre configuration de navigateur.

// app.config.server.ts
import { provideServerRendering } from '@angular/ssr';
import { mergeApplicationConfig } from '@angular/core';

const serverConfig = { providers: [provideServerRendering()] };
export const config = mergeApplicationConfig(appConfig, serverConfig);

Hydratation côté client

La configuration du navigateur active l’hydratation afin que le client réutilise le HTML du serveur au lieu de le générer à nouveau. Le schéma l’ajoute automatiquement.

// app.config.ts
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig = {
  providers: [provideClientHydration()]
};

Le serveur Express

server.ts crée une application Express qui fournit les ressources statiques et délègue le rendu du HTML au moteur SSR Angular pour toutes les autres routes.

// server.ts (simplified)
const app = express();
app.get('**', (req, res) => {
  angularApp.handle(req).then(response =>
    response ? writeResponseToNodeResponse(response, res) : res.sendStatus(404)
  );
});

Serveur de développement

Pendant le développement, ng serve exécute automatiquement le SSR avec le générateur d’application. Vous voyez donc le résultat rendu par le serveur et l’hydratation sans étape supplémentaire.

// ng serve

Compiler pour la production

Une compilation de production produit un paquet browser et un paquet server. Vous exécutez le point d’entrée du serveur Node pour fournir le SSR en production.

// ng build
// node dist/my-app/server/server.mjs

API réservées au navigateur

Le code s’exécute également sur le serveur, où window, document et localStorage n’existent pas. Protégez l’accès à ces éléments, sinon le SSR provoquera une erreur.

import { isPlatformBrowser } from '@angular/common';
import { inject, PLATFORM_ID } from '@angular/core';

const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
if (isBrowser) { localStorage.setItem('k', 'v'); }

URL absolues pour HTTP

Sur le serveur, les URL relatives d’API n’ont pas d’origine. Utilisez des URL absolues ou configurez une base afin que les appels HttpClient côté serveur soient résolus correctement.

Vérifier le fonctionnement du SSR

Pour confirmer le fonctionnement du SSR, demandez une page et examinez la réponse brute, par exemple avec curl. Vous devez voir du contenu rendu dans le HTML, et pas seulement une racine d’application vide.

// curl http://localhost:4000/ | grep "<h1>"

Vérification rapide

Vérifiez vos connaissances sur la configuration du SSR.

Récapitulatif

Vous avez configuré le SSR avec ng add @angular/ssr : cette commande ajoute un serveur Express, provideServerRendering() et l’hydratation côté client. Pensez à protéger les API réservées au navigateur, à utiliser des URL absolues côté serveur et à vérifier le HTML rendu dans la réponse brute.

Questions Fréquemment Posées

La leçon « Configurer le SSR d’Angular » est-elle gratuite ?

Oui — le texte complet de « Configurer le SSR d’Angular » 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 « Configurer le SSR d’Angular » ?

Ajoutez le SSR avec le CLI Angular 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 2 sur 4.

Combien de temps prend la leçon « Configurer le SSR d’Angular » ?

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