Le problème : Une UI visible mais pas interactive

Quand Angular génère une page côté serveur, elle s'affiche rapidement, mais les interactions (clics, formulaires, etc.) ne fonctionnent pas tant que le JavaScript n'est pas complètement chargé. Résultat : les utilisateurs essaient d'interagir, mais rien ne se passe.

La solution : Comment fonctionne Event Dispatch

Angular capture les événements au niveau de la racine du document (document.body) dès qu'ils se produisent, même si le JavaScript n'est pas encore prêt. Une fois l'hydratation terminée, Angular rejoue ces événements dans le bon ordre pour garantir une interaction fluide.

Exemple simple en JavaScript

// 1. Capture tous les événements avant que le JS soit complètement chargé

document.body.addEventListener("click", (event) => {
  window._eventQueue = window._eventQueue || [];
  window._eventQueue.push(event); // Stocke les événements
});

// 2. Une fois le JavaScript chargé, on rejoue les événements stockés
window.onload = () => {
  if (window._eventQueue) {
    window._eventQueue.forEach((event) => {
      event.target.dispatchEvent(new Event(event.type, event)); 
    });
    window._eventQueue = []; // Vide la file d'attente
  }
};

      

Avec cette approche, plus aucun événement n'est perdu, et l'utilisateur n'a pas l'impression que l'interface est bloquée. Cette technique est directement intégrée dans Angular avec une implémentation plus avancée.

Et après ?

Event Dispatch est une première étape. Angular travaille aussi sur les Deferrable Views, qui permettront de charger progressivement le JavaScript uniquement quand c'est nécessaire. Cela réduira encore plus le temps de chargement et améliorera l'expérience utilisateur.