Améliorer les performances Web et le référencement

Si le référencement (SEO) fait partie de votre quotidien depuis plusieurs années, vous avez probablement déjà croisé le concept de rendu côté serveur (SSR). Mais pourquoi privilégier le SSR plutôt que le rendu côté client ?

Ce guide a pour objectif de vous éclairer sur le rendu côté serveur, son importance dans le développement web actuel, et de détailler les différences entre le rendu côté serveur et côté client. Nous explorerons également les frameworks et bibliothèques qui facilitent le rendu côté serveur et la manière dont ils le mettent en œuvre.

Qu'est-ce que le rendu côté serveur (SSR) ?

Le rendu côté serveur (SSR) est une technique de développement web où le contenu d'une page web est généré directement sur le serveur, et non dans le navigateur de l'utilisateur.

Concrètement, le serveur assemble une page HTML complète et pré-rendue qu'il envoie ensuite au navigateur du client. C'est donc le serveur qui réalise l'essentiel du travail. Le navigateur reçoit ainsi une page prête à être affichée, ce qui réduit significativement le temps de chargement initial.

Comment fonctionne le rendu côté serveur ?

À chaque requête d'une page web, le serveur rassemble l'ensemble du code nécessaire (JavaScript, HTML et CSS), puis envoie une page entièrement structurée au navigateur de l'utilisateur.

Contrairement au rendu côté client, le navigateur n'a pas à construire la page de zéro. Le SSR permet un chargement initial rapide de la page et favorise un meilleur référencement.

Le rendu côté serveur s'appuie sur des frameworks web tels que Vue.js ou Gatsby.js pour générer dynamiquement une page HTML entièrement fonctionnelle.

Ces frameworks récupèrent des données depuis des API ou des bases de données, puis utilisent des composants ou des modèles pour créer des documents HTML fonctionnels. Une fois la page générée, le serveur l'envoie au navigateur du client sans traitement supplémentaire.

Crédit image : réagirpwa

Voici le processus de fonctionnement du rendu côté serveur en détail :

Requête HTTP du client : L'utilisateur saisit une adresse dans la barre de navigation, ce qui déclenche une requête HTTP au serveur.
Récupération des données : Le serveur récupère les informations nécessaires depuis des API ou une base de données.
Pré-rendu : Le serveur compile tous les composants JavaScript en HTML statique et l'envoie au navigateur du client.
Chargement et affichage de la page : Le client télécharge et affiche le HTML reçu du serveur.
Hydratation : Le client télécharge ensuite le code JavaScript pour ajouter de l'interactivité à la page HTML.

Rendu côté serveur vs Rendu côté client

Le rendu côté client (CSR) est l'approche opposée au rendu côté serveur. Ici, le navigateur construit le document HTML qu'il présente à l'utilisateur. Voici un tableau comparatif des deux méthodes :

Fonctionnalité	Rendu côté serveur (SSR)	Rendu côté client (CSR)
Temps de chargement initial	Rapide	Peut être lent car il repose sur le chargement côté client
Expérience utilisateur	Améliorée et plus fluide dès la première visite	Peut entraîner des lenteurs lors de la première interaction, mais s'améliore lors des visites suivantes
Accessibilité	Le contenu essentiel est chargé avec le document HTML initial rendu sur le serveur	L'accessibilité peut être problématique, notamment si JavaScript est désactivé
Performance SEO	Le SSR respecte les critères importants pour le SEO	Certains moteurs de recherche peuvent avoir des difficultés à indexer certaines pages dynamiques générées côté client
Évolutivité	Les sites web à fort trafic utilisant le rendu côté serveur sont faciles à faire évoluer	Les développeurs doivent adopter une approche réfléchie pour faire évoluer les sites web utilisant le rendu côté client
Sécurité	Il est plus facile de réduire les vulnérabilités serveur lorsque les pages sont chargées côté serveur	Plus vulnérable aux attaques telles que le cross-site scripting (XSS) et autres vulnérabilités associées au rendu côté client

Avantages du rendu côté serveur pour le référencement

Temps de chargement initial rapide : La rapidité de chargement d'une page est un facteur essentiel pour les visiteurs. Le SSR permet aux utilisateurs de visualiser instantanément une page HTML pré-chargée. Ce chargement instantané réduit l'attente avant d'interagir avec la page.
Performance sur les appareils/réseaux lents : Les utilisateurs peuvent avoir des connexions lentes ou utiliser des appareils peu performants. Le rendu côté serveur réduit le travail de JavaScript pour leurs appareils, améliorant ainsi les performances. Ces appareils n'ont plus besoin de beaucoup de puissance de traitement ou de bande passante pour afficher les pages.
Expérience utilisateur cohérente : Le SSR crée une bonne première impression grâce au Time to First Paint (TTFP), améliorant la perception de votre site web dès le chargement rapide des pages HTML.
SEO amélioré : Les moteurs de recherche prennent en compte plusieurs éléments pour le classement, comme l'expérience utilisateur, le temps passé sur une page et la vitesse de chargement. Le SSR améliore ces aspects, favorisant un meilleur classement dans les moteurs de recherche.
Contenu dynamique facile à gérer : Les moteurs de recherche privilégient le contenu dynamique. Le SSR facilite la gestion et la personnalisation du contenu en fonction des entrées et préférences des utilisateurs.
Évolutivité et mise en cache : Le chargement initial est effectué côté serveur, réduisant la charge du client. Le SSR utilise la mise en cache serveur et le CDN (Content Delivery Network) pour optimiser les performances et réduire la charge sur le serveur.

De nombreux outils et frameworks prennent en charge le SSR. Certains sont spécialement conçus pour le rendu côté serveur, tandis que d'autres prennent en charge les deux types de rendu. Voici quelques exemples couramment utilisés dans le développement web :

Vue.js

Vue.js est un framework JavaScript pour créer des interfaces utilisateur, basé sur les standards JavaScript, HTML et CSS. Il permet de créer des interfaces simples et complexes grâce à son modèle de programmation déclaratif et basé sur des composants.

Les composants Vue manipulent par défaut le DOM (Document Object Model) dans le navigateur. Cependant, ce framework utilise également le SSR pour restituer ces composants sous forme de chaînes HTML sur le serveur et les envoyer directement au navigateur. Une application Vue rendue par le serveur est dite "universelle", car la majeure partie du code s'exécute à la fois côté serveur et client.

React.js

React est une bibliothèque JavaScript pour créer des interfaces utilisateur. Elle utilise un modèle de programmation basé sur des composants réutilisables, et elle est déclarative, ce qui rend le code plus prévisible et facile à déboguer.

React est conçu pour implémenter par défaut le rendu côté client, mais il peut également fonctionner en SSR. Pour l'activer, vous devez configurer votre application React avec un framework d'application Node.js comme Express.js. Il faut aussi mettre à jour les scripts du fichier package.json pour que l'application démarre à partir du serveur Express.

Gatsby

Gatsby est un framework basé sur React pour créer des sites web. Cet outil open source est conçu pour aider les développeurs à créer des applications web rapides. Gatsby s'intègre à différents CMS (Content Management Systems) comme Drupal et WordPress, facilitant ainsi la récupération des données.

Pour activer le rendu côté serveur sur Gatsby, un serveur Node.js est nécessaire. Le SSR s'exécute sur Gatsby Cloud, où chaque requête est envoyée à un processus de travail dans la fonction getServerData. Les données de ce processus sont transmises au composant React qui génère le document HTML.

Angular

Angular est une plateforme de développement basée sur TypeScript. Elle propose un framework basé sur des composants pour créer des applications web de toutes tailles.

Comme React, Angular n'implémente pas le SSR par défaut. Il est cependant possible de configurer une application Angular pour utiliser le rendu côté serveur en l'associant à Express.js, un framework backend Node.js. Angular Universal permet de rendre des composants Angular sur le serveur, réduisant ainsi le temps de chargement initial.

Comment savoir si un site web utilise SSR ou CSR ?

Il peut être difficile de déterminer si un site web utilise le rendu côté serveur ou côté client en tant que simple visiteur. Heureusement, il est possible d'inspecter un site web pour identifier l'approche de rendu utilisée. Pour l'exemple, inspectons le site toptips.fr en faisant un clic droit sur une page, puis en sélectionnant "Afficher la source de la page".

Si vous voyez des balises telles que ,

Limites du rendu côté serveur

Complexité accrue du code : La mise en place du rendu côté serveur peut nécessiter des configurations supplémentaires côté serveur, ce qui peut accroître la complexité du code et rendre sa maintenance plus difficile.
Augmentation de la charge du serveur : Bien que le SSR améliore les temps de chargement, il peut devenir un goulot d'étranglement en cas de forte affluence. Le serveur étant responsable du rendu HTML, une surcharge peut provoquer un ralentissement voire un crash du serveur.

Le rendu côté serveur est-il identique au balisage côté serveur ?

Le rendu côté serveur est une approche de développement web où le serveur envoie une page HTML entièrement chargée au navigateur, dans le but d'optimiser le temps de chargement initial et le référencement.

Le balisage côté serveur, quant à lui, se focalise sur l'exécution des analyses et des suivis côté serveur. Cela permet de soulager le navigateur du client, améliorant la sécurité et les performances. Vous pouvez en apprendre davantage sur le balisage côté serveur pour une meilleure compréhension.

Conclusion

Le rendu côté serveur est un choix judicieux pour les développeurs qui souhaitent améliorer les performances de leurs applications grâce à des temps de chargement plus courts et une expérience utilisateur optimisée.

Cependant, une mise en œuvre mal gérée du SSR peut s'avérer complexe et rendre la maintenance du code plus ardue. Malgré ces défis, les avantages du SSR justifient largement son adoption par de nombreuses organisations.

Dans un prochain temps, vous pourrez également explorer les raisons d'utiliser le balisage côté serveur à la place du balisage côté client.