Rendu côté client (CSR)
Le rendu côté client ou RCC (client-side rendering ou CSR en anglais) désigne la pratique consistant à générer le contenu HTML à l'aide de JavaScript dans le navigateur. Le RCC s'oppose au rendu côté serveur (RCS), où le serveur génère le contenu HTML. Les deux techniques ne sont pas exclusives et peuvent être utilisées ensemble dans une même application.
Une application purement RCC peut renvoyer le contenu HTML suivant :
<!doctype html>
<html lang="fr">
<head>
<title>Mon site</title>
<script src="bundle.js"></script>
</head>
<body>
<div id="root"></div>
<noscript>
<p>Cette application nécessite JavaScript pour fonctionner.</p>
</noscript>
</body>
</html>
Le contenu réel de la page est ensuite généré par JavaScript dans un fichier bundle.js, via la manipulation du DOM.
Les avantages du RCC incluent :
- Interactivité : toute mise à jour de la page, y compris les changements de route, ne nécessite pas de rechargement complet. L'application paraît ainsi plus rapide et plus réactive.
- Performance : le serveur n'a besoin d'envoyer que le HTML initial et les ressources JavaScript. Les mises à jour suivantes peuvent être récupérées via une API, ce qui peut être plus rapide que de charger une page HTML complète et réduit la charge serveur.
Le RCS et le RCC ont chacun leurs compromis de performance, et il est possible de combiner les deux pour profiter des avantages de chaque technique. Par exemple, le serveur peut générer un squelette de page avec des espaces vides, et le client peut ensuite récupérer des données supplémentaires et mettre à jour la page selon les besoins.
Notez que les applications monopage (APU) ne nécessitent pas forcément le RCC. Les frameworks modernes comme React, Vue et Svelte permettent de créer des APU avec des capacités RCS.