Angular 22 SSR : guide complet

Angular 22 introduit une refonte majeure du Server-Side Rendering avec les routes hybrides, permettant de combiner prerendering statique et rendu dynamique au sein d'une même application.

Pourquoi le SSR ?

Le SSR adresse trois problèmes critiques pour les applications web modernes :

• Performance perçue : l'utilisateur voit du contenu dès les premières millisecondes
• SEO : les bots des moteurs de recherche peuvent indexer le contenu rendu
• Core Web Vitals : LCP et FCP améliorés de manière significative

Routes hybrides Angular 22

// app.routes.server.ts
import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  { path: '', renderMode: RenderMode.Prerender },
  { path: 'about', renderMode: RenderMode.Prerender },
  { path: 'projects', renderMode: RenderMode.Prerender },
  { path: 'blog', renderMode: RenderMode.Prerender },
  { path: 'blog/:slug', renderMode: RenderMode.Server },
  { path: '**', renderMode: RenderMode.Server },
];

TransferState : éviter le double fetch

Sans TransferState, les requêtes HTTP faites côté serveur sont rejouées côté client. Angular fournit un mécanisme de sérialisation d'état pour éviter ce coût :

import { TransferState, makeStateKey } from '@angular/core';

const POSTS_KEY = makeStateKey<BlogPost[]>('blog-posts');

@Injectable({ providedIn: 'root' })
export class BlogService {
  private transferState = inject(TransferState);
  private http = inject(HttpClient);

  getPosts(): Observable<BlogPost[]> {
    if (this.transferState.hasKey(POSTS_KEY)) {
      const cached = this.transferState.get(POSTS_KEY, []);
      this.transferState.remove(POSTS_KEY);
      return of(cached);
    }
    return this.http.get<BlogPost[]>('/blog/manifest.json').pipe(
      tap(posts => this.transferState.set(POSTS_KEY, posts))
    );
  }
}

Conclusion

Angular 22 SSR représente une maturité technique impressionnante. La combinaison routes hybrides + TransferState + provideClientHydration offre une expérience développeur optimale tout en maximisant les performances utilisateur.