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

Si vous interagissez avec le référencement depuis des années, vous avez peut-être déjà rencontré le rendu côté serveur (SSR) comme l’un des concepts. Pourquoi opter pour le rendu côté serveur (SSR) au lieu du rendu côté client ?

Dans ce guide, je présenterai le concept de rendu côté serveur (SSR), son importance dans le développement Web moderne, et je ferai la différence entre le rendu côté serveur et le rendu côté client. Nous présenterons également les frameworks et les bibliothèques qui prennent en charge le rendu côté serveur et comment ils le font.

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

Le rendu côté serveur (SSR) est une technique de développement Web dans laquelle le contenu d’une page Web est rendu sur le serveur au lieu du navigateur du client.

Pour que cela se produise, le serveur génère une page HTML entièrement rendue qu’il envoie au navigateur client, ce qui signifie que c’est le serveur qui fait le gros du travail. Le navigateur reçoit une page prête à être affichée, ce qui accélère le temps de chargement initial.

Comment fonctionne le rendu côté serveur ?

Chaque fois qu’un utilisateur demande une page Web, le serveur rassemble tout le code JavaScript, HTML et CSS nécessaire, puis envoie une page entièrement formée au navigateur de l’utilisateur.

En tant que tel, le navigateur n’a pas besoin de créer une page à partir de zéro, comme c’est le cas avec le rendu côté client. SSR conduit à un chargement initial rapide de la page et est également bon pour le référencement.

Le rendu côté serveur utilise des frameworks Web tels que Vue.js et Gatsby.js en arrière-plan pour générer dynamiquement une page HTML entièrement fonctionnelle.

Ces frameworks extraient des données d’API ou de bases de données, puis utilisent des composants ou des modèles pour créer des documents HTML fonctionnels. Une fois que le serveur a terminé la création de la page, il l’envoie au navigateur client sans aucun autre traitement.

Crédit image : réagirpwa

Voici comment fonctionne le rendu côté serveur :

• Le client envoie une requête HTTP : un utilisateur saisit une adresse dans la barre d’adresse du navigateur. Le navigateur établit une connexion HTTP et envoie une requête au serveur.
• Récupération de données : le serveur récupère les données des API ou de la base de données.
• Pré-rendu : le serveur compile tous les composants JavaScript requis en HTML statique et envoie ce HTML au navigateur client.
• Chargements et rendus de page : le client télécharge et affiche le HTML à partir du serveur.
• Hydratation : Le client télécharge enfin tout le code JavaScript pour ajouter de l’interactivité à la page HTML.

Rendu côté serveur et rendu côté client

Le rendu côté client est à l’opposé du rendu côté serveur. Fondamentalement, le navigateur génère un document HTML qu’il affiche aux utilisateurs. Voici les différences entre ces deux approches :

FonctionnalitéRendu côté serveur (SSR)Rendu côté client (CSR)Temps de chargement initialTemps de chargement initial rapideIl peut être lent car il repose sur le chargement côté clientExpérience utilisateurExpérience utilisateur améliorée et améliorée lors de la première visiteCela peut parfois entraîner un ralentissement expérience utilisateur lors de la première interaction mais augmente lors des visites suivantesAccessibilité Tout le contenu essentiel est chargé avec le document HTML initial rendu sur le serveurL’accessibilité peut être un problème, surtout lorsque les utilisateurs ont désactivé JavaScriptPerformances SEOSSR coche toutes les bonnes cases pour le référencementCertains moteurs de recherche peuvent le trouver difficile d’indexer certaines pages générées dynamiquement côté clientÉvolutivitéIl est facile de faire évoluer les sites Web à fort trafic qui utilisent le rendu côté serveur Les développeurs doivent proposer une approche bien pensée pour faire évoluer les sites Web qui pratiquent le rendu côté clientSécuritéIl est facile de réduire le serveur -Vulnérabilités côté lorsque les pages sont chargées sur le serveur. Sujet aux attaques telles que le cross-site scripting (XSS) et d’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 : le temps nécessaire au chargement d’une page est l’un des facteurs pris en compte par les visiteurs de votre site Web. SSR permet aux utilisateurs d’un site Web de voir presque instantanément une page HTML entièrement chargée. Le chargement instantané réduit le temps d’attente de l’utilisateur avant d’interagir avec une page Web.
• Performances rapides sur les appareils/réseaux lents : le réseau que les utilisateurs utilisent pour accéder à vos pages Web peut être lent, ou ils utilisent des appareils fonctionnant sur des systèmes d’exploitation pas si rapides. Le rendu côté serveur signifie que les appareils des utilisateurs n’ont pas besoin d’exécuter autant de JavaScript, ce qui augmente leurs performances. De tels réseaux ou appareils n’ont plus besoin de beaucoup de bande passante ou de puissance de traitement pour afficher les pages HTML chargées.
• Expérience utilisateur cohérente : SSR vous permet de créer une bonne première impression grâce au Time to First Paint (TTFP). Ces utilisateurs percevront votre site Web en premier lorsque les pages HTML sont chargées rapidement, grâce au rendu côté serveur.
• SEO amélioré : les moteurs de recherche comme Google, Bing et YouTube prennent en compte de nombreux éléments lorsqu’ils classent des pages Web. Par exemple, ils vérifieront l’expérience utilisateur, le temps que les gens passent sur vos pages et la vitesse de chargement. SSR améliore tous ces domaines, ce qui signifie que votre application sera probablement mieux classée dans les moteurs de recherche.
• Contenu dynamique facile à gérer : les moteurs de recherche adorent le contenu dynamique. Avec SSR, les développeurs peuvent désormais gérer facilement le contenu dynamique et également personnaliser/adapter le contenu en fonction des entrées et des préférences de l’utilisateur.
• Évolutivité et mise en cache : dans SSR, le serveur effectue le chargement initial, ce qui réduit la quantité de traitement que le client doit gérer et le rend plus évolutif. SSR peut également utiliser la mise en cache au niveau du serveur et du réseau de diffusion de contenu (CDN) pour réduire la charge du serveur et améliorer les performances.

Certains outils et cadres divers mettent en œuvre la RSS. Certains sont conçus uniquement pour prendre en charge le rendu côté serveur, tandis que d’autres sont conçus pour prendre en charge le rendu côté client et côté serveur. Voici quelques-uns des éléments les plus courants avec lesquels vous êtes susceptible d’interagir dans le monde du développement Web :

Vue.js

Vue.js est un framework JavaScript permettant de créer des interfaces utilisateur et repose sur les standards JavaScript, HTML et CSS. Avec ce framework, vous pouvez créer des interfaces utilisateur simples et complexes à l’aide de son modèle de programmation déclaratif et basé sur des composants.

Les composants Vue, par défaut, produisent et manipulent le modèle d’objet de document (DOM) dans le navigateur en tant que sortie. Cependant, ce framework utilise également 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 considérée comme « universelle » car la plupart du code s’exécute sur le serveur et le client.

Réagir.js

Réagir est une bibliothèque JavaScript permettant de créer des interfaces utilisateur. Cette bibliothèque utilise un modèle de programmation basé sur des composants dans lequel vous pouvez diviser votre application en petits composants réutilisables. React est également déclaratif, ce qui rend le code facile à prédire et à déboguer.

React est conçu pour implémenter par défaut le rendu côté client et côté serveur. Si vous devez implémenter le rendu côté serveur sur une application React, vous devez le configurer à l’aide d’un framework d’application Node.js comme Express.js. Vous devez également mettre à jour vos scripts dans le fichier package.json pour garantir que l’application « démarre » à partir du serveur Express.

Gatsby

Gatsby est un framework basé sur React pour la création de sites Web. Ce framework open source est conçu pour aider les développeurs à créer des applications Web rapides. Gatsby s’intègre à divers systèmes de gestion de contenu comme Drupal et WordPress, facilitant la récupération de données.

Vous avez besoin d’un serveur Node.js pour configurer rendu côté serveur sur Gatsby. SSR s’exécute sur Gatsby Cloud, où chaque requête est envoyée à un processus de travail dans la fonction getServerData. Toutes les données du processus de travail sont transmises au composant React qui renvoie un document HTML.

Angulaire

Angulaire est une plateforme de développement construite à l’aide de TypeScript. Cette plate-forme dispose d’un cadre basé sur des composants que vous pouvez utiliser pour créer des applications Web. Vous pouvez utiliser Angular pour créer des applications de petite taille et d’entreprise.

Comme React, Angular n’implémente pas SSR par défaut. Cependant, vous pouvez configurer votre application Angular pour implémenter le rendu côté serveur en la combinant avec Express.js, un framework backend node.js. Angular Universal vous permet de restituer des composants angulaires sur le serveur et de réduire le temps de chargement initial.

Comment vérifier si un site Web utilise SSR ou CSR

Si vous êtes un développeur ou un spécialiste du marketing, il est difficile de déterminer si un site Web utilise le rendu côté serveur ou côté client lorsque vous le visitez. Heureusement, vous pouvez inspecter un site Web pour déterminer l’approche de rendu qu’il utilise. Nous pouvons inspecter notre site Web toptips.fr pour le démontrer. Je clique avec le bouton droit sur n’importe quelle page, puis je sélectionne « Afficher la source de la page ».

Si vous pouvez voir des balises telles que ,