SSR (rendu côté serveur) vs CSR (rendu côté client) : lequel choisir pour son site web ?

En SSR, sigle de Server Side Rendering traduit par rendu côté serveur, c'est le serveur qui travaille : il stocke tous les documents HTML du site web, et pour chaque requête HTTP, il envoie au navigateur le document correspondant. Le serveur est sollicité à chaque action d'un utilisateur du site web : chaque fois que l'utilisateur clique sur un bouton, le serveur envoie la page web qui correspond au résultat attendu. En CSR, sigle de Client Side Rendering traduit par rendu côté client, c'est le navigateur qui travaille : quand un utilisateur ouvre une application web, le navigateur reçoit l'intégralité du code HTML, CSS et JavaScript de l'application. À chaque action de l'utilisateur dans l'application web, c'est au navigateur d'exécuter le code pour afficher le résultat attendu, il ne sollicite pas le serveur.

Certains sites statiques, de type sites vitrines, utilisent exclusivement le SSR. Les single page applications (SPA), telles que Gmail et LinkedIn, privilégient le CSR. La plupart des sites et applications web, toutefois, contiennent à la fois du SSR et du CSR.

Le Server Side Rendering, traduit en français par rendu côté serveur, est la technique traditionnelle de fonctionnement d'un site web. Le rendu côté serveur signifie que c'est au serveur de fournir la page web au navigateur, qui l'affiche à l'écran.

Voici les étapes du SSR :

1. Le développeur doit coder la page produit d'un site de e-commerce.
2. Il décide d'insérer un bouton de description du produit.
3. Il prend le parti de coder ce bouton en SSR : le développeur code dans un document HTML spécifique la page de description du produit.
4. Pour afficher la description du produit, l'utilisateur doit cliquer sur un bouton « Description ».
5. Quand l'utilisateur clique, une nouvelle page se charge : la page de description du produit apparaît à l'écran.
6. Au clic, le navigateur a fait une requête HTTP pour obtenir la nouvelle page ; le serveur a transmis le document HTML correspondant au navigateur ; le navigateur a affiché la page de description du produit.

Dans cet exemple, si le développeur avait choisi le CSR, c'est le navigateur qui aurait dû modifier l'affichage de la page web pour afficher la description du produit. Le serveur ne serait pas intervenu dans le processus.

Avantages et inconvénients du SSR

Avantages du SSR

Le SSR offre deux avantages majeurs : le travail de codage est simplifié, et la vitesse de chargement est optimale à l'ouverture d'une page.

• Le SSR consiste pour le développeur à coder chaque page du site web de manière indépendante. Le développeur y parvient grâce ses connaissances en HTML et en CSS. Contrairement au CSR, le SSR ne nécessite pas de connaissances avancées en JavaScript, qui est un langage de programmation plus complexe à maîtriser. JavaScript est indispensable pour ajouter à une page web des éléments interactifs, tels qu'un formulaire d'inscription à une newsletter. Mais en SSR, les bibliothèques JavaScript suffisent : le développeur utilise des morceaux de code pré-écrit pour ajouter les éléments interactifs. Ainsi, son travail de codage est simplifié.
• En SSR, le serveur dispose d'un document HTML par page web, chaque document HTML contient uniquement le code de la page à afficher. Quand un utilisateur ouvre la page web, le navigateur fait une requête à laquelle le serveur répond rapidement : la page web est disponible immédiatement. En comparaison, le temps de réponse en CSR est supérieur car le serveur doit envoyer au navigateur tout le code HTML, CSS et JavaScript de l'application web, et le navigateur doit le charger. Un site web en SSR s'ouvre plus vite qu'une application web en CSR.

Inconvénients du SSR

Le principal inconvénient du SSR se manifeste au niveau de l'expérience utilisateur sur le site web. Quand l'utilisateur ouvre une page, elle se charge plus rapidement en SSR qu'en CSR. Mais lorsqu'il navigue dans un site en SSR, au moment de passer d'une page à une autre, l'utilisateur doit attendre le temps de réaction du navigateur. Le navigateur en effet fait une nouvelle requête HTTP pour charger chaque nouvelle page à afficher. Si le site s'ouvre plus vite en SSR, il est moins réactif quand l'utilisateur navigue.

Sur la plupart des sites web, la vitesse de fonctionnement ne pose pas de problème majeur aux utilisateurs. L'inconvénient du SSR peut être reproché dans deux contextes spécifiques.

• Sur les applications web où les utilisateurs sont habitués à l'instantanéité : les réseaux sociaux, typiquement, offrent un haut niveau d'interactivité et nécessitent des performances élevées en matière de temps d'exécution. Quand un utilisateur clique sur un bouton « J'aime », par exemple, son clic doit être comptabilisé instantanément. Le SSR est moins adapté.
• Sur certaines fonctionnalités cruciales d'un site web : au moment de valider sa commande en ligne, par exemple, l'utilisateur doit pouvoir accéder sans délai au module de paiement. À défaut, il risque d'abandonner son panier. Utiliser le SSR peut nuire à cette étape du parcours client.

Le SSR atteint ses limites quand l'interactivité est centrale sur l'application web et quand la fluidité de l'expérience utilisateur représente un enjeu prioritaire. C'est là que le CSR intervient.

Les SPA utilisent la technique Client Side Rendering. Quand un utilisateur ouvre Google Maps, par exemple, l'application se charge une seule fois. À chaque action de l'utilisateur, pour zoomer une carte notamment, c'est le navigateur qui exécute le JavaScript pour rendre le résultat à l'écran. Le navigateur modifie la page sans rien demander au serveur.

Au-delà des SPA, le Client Side Rendering est utilisé à l'intérieur des sites web, pour améliorer la performance des fonctionnalités interactives. Illustration avec une plateforme de location de maisons entre particuliers :

1. Le développeur code la page d'accueil qui inclut le moteur de recherche, une page type pour la présentation et la location des maisons, puis une page de CGV. Chaque page est codée dans un document HTML distinct, en SSR.
2. Pour la page type qui présente la maison et permet de la louer, le développeur utilise le CSR. Quand un utilisateur fait défiler les photos, affiche le descriptif, géolocalise la maison, choisit ses dates de location dans le calendrier et réserve la maison : le navigateur ne charge pas une nouvelle page, il modifie l'affichage de la page type en exécutant JavaScript.
3. Quand l'utilisateur navigue dans la page type en CSR, il utilise toutes les fonctionnalités interactives sans effet de transition. S'il veut consulter la page de CGV, en revanche, une nouvelle page se charge.

Avantages et inconvénients du CSR

Avantages du CSR

Le principal avantage du CSR est la vitesse de fonctionnement de l'application. La page web est actualisée en temps réel, sans effet de transition. Ainsi, l'expérience utilisateur est optimale : pour chaque fonctionnalité interactive, la réponse est instantanée.

Inconvénients du CSR

C'est principalement le responsable SEO qui est confronté à un inconvénient non négligeable avec le CSR : le référencement naturel est complexifié. Explications :

1. Les moteurs de recherche, pour référencer un site web, déploient des robots d'exploration.
2. Or ces robots viennent chercher les informations auprès des serveurs.
3. En CSR, le fichier HTML du site web est quasiment vide.
4. À défaut d'informations, le moteur de recherche n'est pas en mesure de référencer le site web.

Google recommande aux développeurs de privilégier « l'affichage côté serveur », c'est-à-dire le SSR, à des fins SEO. Google tempère toutefois sa recommandation, en expliquant les bonnes pratiques pour améliorer le référencement des applications web codées en CSR.

• Le prerendering, ou pré-affichage, est une méthode qui permet aux robots de lire le code pour référencer le site web. Il faut utiliser un framework JavaScript adapté, ou un logiciel spécifique. L'outil interprète le JavaScript, et enregistre une version statique du code pour la rendre aux robots d'exploration au moment de l'indexation du site.
• La méthode de rehydration, ou hydratation, est similaire au prerendering. Google la conseille également pour faciliter le travail de référencement.
• Google précise qu'en tout état de cause, son robot d'exploration Googlebot est capable d'exécuter le code JavaScript pour référencer le site web codé en CSR. Il faut toutefois patienter plus longtemps qu'avec un site codé en SSR.

Quand utiliser le SSR et le CSR ?

Utilité du SSR

Le SSR convient parfaitement aux sites web relativement statiques. À cet égard, son utilité est manifeste pour créer des blogs et des sites vitrines. Quand les enjeux sont modérés sur le plan de l'interactivité, en outre, le SSR est une bonne option : le travail de codage et de référencement est facilité.

Utilité du CSR

Il est rare aujourd'hui de concevoir une application web exclusivement en CSR, eu égard à la problématique en matière de SEO. L'utilité du CSR se manifeste dans le cadre d'une approche hybride de la conception du site web :

1. Le site web est constitué de plusieurs pages.
2. Les pages web à haut niveau d'interactivité sont codées en CSR pour optimiser la réactivité.
3. Le contenu stratégique en termes de SEO est intégré sur des pages en SSR pour optimiser le référencement.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.