Les Différentes Stratégies de Rendu Frontend

Lorsqu'un utilisateur charge une page web, plusieurs stratégies de rendu peuvent être utilisées selon les besoins en termes de performance, d'interactivité et de coût serveur. Cet article détaille les différentes approches, en expliquant leur fonctionnement depuis la requête initiale jusqu'à l'exécution du JavaScript et l'activation des interactions utilisateur.

Les stratégies couvertes incluent :

• Rendu Statique (SSG - Static Site Generation)
• Rendu Côté Serveur (SSR - Server-Side Rendering)
• Rendu Côté Client (CSR - Client-Side Rendering)
• Régénération Statique Incrémentale (ISR)
• Stale While Revalidate (SWR)
• Rendu Hybride

Chaque stratégie se caractérise par la manière dont la page est servie (pré-générée ou rendue à la volée), le rôle du JavaScript dans le résultat final, et comment les interactions utilisateur sont gérées une fois la page chargée.

1. Rendu Statique (SSG - Static Site Generation)

Principe Les pages sont générées au moment du build et servies telles quelles aux utilisateurs. Le serveur ou le CDN retourne simplement un fichier HTML/CSS/JS prêt à l'emploi.

Processus Technique

• Build du site : Chaque page est pré-générée pendant le déploiement.
• Stockage CDN : Le contenu est distribué sur un réseau de serveurs.
• Requête utilisateur : L'utilisateur reçoit le fichier HTML prêt immédiatement.
• Exécution JavaScript : Une fois la page affichée, le JavaScript s'exécute pour activer les interactions.

Avantages

• Extrêmement rapide grâce à la livraison directe depuis le CDN.
• Faible charge serveur, car tout est pré-généré.
• SEO-friendly, car le contenu est immédiatement accessible aux moteurs de recherche.
• Idéal pour les sites statiques (blogs, documentation, landing pages).

Inconvénients

• Impossible de personnaliser le contenu en fonction de l'utilisateur au chargement.
• La mise à jour des données nécessite une reconstruction complète du site.

2. Rendu Côté Serveur (SSR)

Principe Le serveur génère dynamiquement la page HTML pour chaque requête avant de l'envoyer au client.

Processus Technique

• Requête utilisateur : L'utilisateur accède à une URL.
• Rendu serveur : Le serveur crée une page HTML complète basée sur des données dynamiques.
• Livraison de la réponse : La page pré-remplie est envoyée à l'utilisateur.
• Exécution JavaScript : Le JavaScript s'exécute pour activer les interactions.

Avantages

• SEO-friendly, car le contenu est immédiatement accessible aux moteurs de recherche.
• Adapté aux sites avec du contenu dynamique personnalisé (dashboards, applications SaaS).
• Fournit un chargement initial de page plus rapide comparé au rendu purement côté client.

Inconvénients

• Charge serveur plus élevée car chaque requête nécessite un rendu côté serveur.
• Latence accrue par rapport à un site statique due à la génération HTML à la volée.

3. Rendu Côté Client (CSR)

Principe Le serveur envoie un fichier HTML minimal, et le JavaScript construit l'interface côté client.

Processus Technique

• Requête utilisateur : L'utilisateur reçoit un fichier HTML basique contenant un conteneur minimal.
• Exécution JavaScript : Le JavaScript récupère les données via des APIs et génère l'interface.

Avantages

• Très dynamique, idéal pour les applications riches et complexes.
• Faible charge serveur, car tout est géré côté client.

Inconvénients

• Temps de chargement initial plus long en attendant l'exécution du JavaScript.
• Moins SEO-friendly sans pré-rendu ou approche hybride.

4. Régénération Statique Incrémentale (ISR)

Principe Une version améliorée du SSG qui permet la régénération à la volée des pages statiques sans reconstruction complète du site.

Processus Technique

• Requête utilisateur : Si une page existe déjà, elle est servie depuis le CDN. Sinon, c'est comme du SSR.
• Expiration et régénération : Une fois le temps d'expiration de la page atteint (ex : 1 heure), une nouvelle version est générée en arrière-plan.
• Mise à jour silencieuse : La nouvelle version remplace silencieusement l'ancienne.
• Exécution JavaScript : Le JavaScript s'exécute pour activer les interactions sur la version mise à jour.

Avantages

• Livraison rapide via le CDN.
• Met à jour les données sans nécessiter une reconstruction complète.

Inconvénients

• La première requête après expiration peut brièvement afficher une version obsolète.

5. Stale While Revalidate (SWR)

Principe Cette stratégie gère la récupération de données côté client : les données en cache sont affichées immédiatement, et les nouvelles données sont récupérées en arrière-plan.

Processus Technique

• Affichage immédiat : Les données en cache sont montrées instantanément.
• Récupération en arrière-plan : Les nouvelles données sont chargées silencieusement en arrière-plan.
• Mise à jour de l'interface : L'affichage se met à jour dès que les données actualisées sont disponibles.

Avantages

• Perçu comme un chargement quasi instantané.
• Améliore l'expérience utilisateur pour les applications avec des données en constante évolution.

Inconvénients

• Peut brièvement afficher des données obsolètes.

6. Rendu Hybride

Principe Une approche combinée qui intègre plusieurs stratégies :

• SSG pour le contenu statique,
• SSR pour le contenu dynamique,
• CSR pour les interactions spécifiques,
• ISR/SWR pour les mises à jour de données.

Cette méthode maximise les performances en tirant parti des avantages de chaque approche.

Vous pouvez également combiner dans la même page du SSG avec du CSR.

Conclusion

Le choix de la stratégie de rendu dépend du contexte spécifique et des exigences du projet. Un simple site vitrine pourrait s'appuyer uniquement sur le SSG, tandis qu'une application SaaS dynamique pourrait bénéficier d'une approche de rendu hybride combinant SSR, ISR et SWR.

L'objectif reste d'optimiser l'expérience utilisateur tout en réduisant la charge serveur et les temps de chargement des pages, assurant une exécution efficace du JavaScript pour activer les interactions.