Des sites web devenus plus interactifs et dynamiques : Client Side Rendering (CSR), Single Page Application (SPA)

Le Client Side Rendering (CSR), ou rendu côté client, est une approche de développement web qui a gagné en popularité à partir des années 2010. Il est apparu au début du Web 2.0, accompagnant l'évolution des sites web devenus plus interactifs et dynamiques.

Historiquement, les applications web étaient rendues intégralement depuis le serveur (le précurseur du Server Side Rendering (SSR)). Pour chaque page visitée, le serveur génère et envoie l'intégralité du contenu HTML au navigateur (par exemple pour un site développé sur la base d'un framework PHP).

Avec l'émergence du JavaScript et des frameworks associés, le CSR est devenu une alternative prometteuse.

Apparition et premiers frameworks JS

Le CSR a fait son apparition dans les années 2010 en réponse à la nécessité croissante de créer des applications web plus interactives et dynamiques.

C'est ainsi que sont apparus les premiers frameworks JavaScript tels que Angular.js (2010), Ember.js (2011), React.js (2011) et Vue.js (en 2014). Ces frameworks ont permis aux développeurs de construire des applications web complexes ayant une logique côté client plus robuste.

Le CSR est rapidement devenu une approche attrayante, car il permettait de déplacer une partie du traitement côté serveur vers le navigateur lui-même, ouvrant la voie à des applications web plus réactives et fluides.

En adoptant le CSR, les développeurs ont pu offrir une expérience utilisateur améliorée grâce à des interactions plus rapides et des mises à jour en temps réel sans nécessiter de rafraîchissement complet de la page. Cette approche a également ouvert la voie à un responsive accru, permettant aux applications web d'être plus flexibles et adaptées à différents dispositifs et écrans.

Aujourd'hui, le Client Side Rendering reste un pilier essentiel du développement web, jouant un rôle clé dans la création d'applications web dynamiques, réactives et performantes.

Comment fonctionne le Client Side Rendering (CSR) ?

Dans le processus du CSR, au lieu d'envoyer des pages HTML complètes au client, le serveur envoie un document HTML minimal qui contient généralement des balises <script> faisant référence aux fichiers JavaScript nécessaires à l'application.

Une fois que le navigateur a reçu ce contenu, les fichiers JavaScript s'exécutent et prennent en charge le rendu et l'interactivité de l'application.

Les différentes étapes du CSR (source)

Quels sont les avantages du Client Side Rendering (CSR) ?

Le Client Side Rendering offre 3 principaux avantages :

1/ Une expérience utilisateur améliorée

Le CSR offre une expérience utilisateur plus fluide et réactive, car les interactions se produisent sans avoir à recharger la page entière (apparition des Single Page Application - SPA)

2/ Une meilleure interopérabilité (responsive)

Les applications basées sur le processus du CSR sont généralement indépendantes de la plate-forme, ce qui permet aux développeurs de créer des applications web adaptées à une variété de dispositifs et d'écrans.

3/ Un serveur moins sollicité

Avec CSR, le serveur envoie principalement des données, ce qui permet de décharger le processeur du serveur et de réduire sa charge globale.

Quels sont les inconvénients du CSR ?

Malgré ses avantages en termes d'interactivité, le Client Side Rendering (CSR) présente plusieurs inconvénients majeurs :

1/ Une performance initiale moindre

Le CSR nécessite de télécharger le code JavaScript de l'application avant de pouvoir afficher quoi que ce soit, ce qui peut entraîner des temps de chargement initiaux plus longs, en particulier sur des connexions Internet lentes.

2/ Des problèmes de référencement (SEO)

Les robots d'indexation des moteurs de recherche (celui de Google en tête) ont (avaient) du mal à lire, interpréter le code JavaScript. Pour un site contenant un part important de Javascript cette limite peut / pouvait affecter le référencement et la visibilité de l'application dans les résultats de recherche.

3/ Des problèmes de rendu

Avec le Client Side Rendering (CSR), le contenu est souvent généré de manière asynchrone par JavaScript après le chargement initial de la page, ce qui signifie que le contenu principal peut être retardé jusqu'à ce que les ressources JavaScript nécessaires soient téléchargées et exécutées. Cela peut également conduire à la présence de contenu "caché" dans le code HTML initial.En conclusion, le CSR est devenu un pilier essentiel du développement web moderne. Il offre une expérience utilisateur améliorée, une interopérabilité accrue, et permet des applications web réactives et performantes. Toutefois, le CSR n'est pas sans inconvénients, notamment en ce qui concerne les performances initiales, le rendu et le référencement (SEO).En tenant compte de ces aspects, il est important de considérer une approche alternative telle que le Server Side Rendering (SSR).