Rendu côté client (CSR)
Le rendu côté client (CSR pour client-side rendering en anglais) désigne la pratique consistant à générer le contenu HTML à l'aide de JavaScript dans le navigateur. Le CSR 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 CSR 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, avec la manipulation du DOM.
Les avantages du CSR 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 avec une API, ce qui peut être plus rapide que de charger une page HTML complète et réduit la charge serveur.
Le SSR et le CSR 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 à page unique (SPA) ne nécessitent pas forcément le CSR. Les frameworks modernes comme React, Vue (angl.) et Svelte (angl.) permettent de créer des SPA avec des capacités CSR.