Qu'est-ce que le SSR ou Server-Side Rendering ?

Lorsque l'on parle de la mode, on a tendance à dire qu'elle se répète et que les habits démodés redevienne tout à coup "dans le vent", et bien on constate exactement la même chose avec certaines technologies, notamment dans le monde du web !

Et c'est exactement ce que l'on vit avec le SSR !

Avec l'arrivée de la première version d'AngularJS en 2010, les SPA (Single-Page Application) ont monopolisé toute l'attention jusqu'à devenir la norme pour démarrer un nouveau projet quel qu'il soit.

Mais depuis quelques années, la tendance s'inverse et le SSR est à nouveau au devant de la scène, mais en quoi est-ce que ça consiste exactement ?

C'est ce que nous allons voir aujourd'hui !

Le principe

Avant de parler du fonctionnement du "Server-Side Rendering", il faut d'abord expliquer le fonctionnement des "Single-Page Application" afin de bien comprendre ce qui différencie ces deux paradigmes.

Dans le cas d'une SPA "classique", voici ce qu'il se passe en terme de communication entre le client et le serveur:

• Le client envoie une requête HTTP[GET] / au serveur
• Le serveur retourne une page index.html quasi-vide contenant uniquement les liens vers les ressources JS et CSS de l'application
• Le navigateur va récupérer les ressources indiquées
• Le navigateur charge l'application en mémoire et se lance
• L'application va charger la vue demandée par l'utilisateur
• Une fois la vue chargée, l'application va demander au serveur les données à injecter dans la page en envoyant une ou plusieurs requêtes HTTP
• Le serveur va faire des appels à la base de données , préparer et envoyer les données
• Si les données retournées contiennent des contenus multimédias, le navigateur devra les charger
• A la fin seulement, l'utilisateur pourra consulter la page demandée contenant toutes les informations chargées

Mais dans le cas d'un site fonctionnant en SSR, les communications sont différentes :

• Le client envoie une requête HTTP[GET] / au serveur
• Le serveur va se charger de construire la vue
• Le serveur va faire des appels à la base de données , préparer et injecter les données dans la vue
• Puis il va retourner un unique fichier HTML contenant déjà tout le contenu, ainsi que les liens vers quelques ressources externes éventuelles
• Le navigateur va charger les éventuelles ressources (js, css, images, vidéos, etc)
• La page est entièrement disponible pour l'utilisateur

Vous l'aurez compris, dans la première méthode, c'est le navigateur client qui va se charger de faire toutes les demandes de données, va multiplier les requêtes HTTP et c'est l'application cliente qui va décider où injecter toutes les données.

En SSR, le but du navigateur web est uniquement de charger une page et quelques ressources externes, et c'est au serveur de faire tout le reste du travail.

Les avantages du SSR

• De meilleurs performances SEO, car tout le contenu textuel est disponible après le premier chargement, et bien que Google et Bing soient capable de parcourir des SPA, il n'attendent jamais le chargement d'un contenu asynchrone
• Temps de chargement de contenu plus rapide, notamment sur des connexions internet lentes car l'utilisateur n'a pas besoin d'attendre que tout le code de l'application soit chargé avant de pouvoir accéder au contenu
• Le nombre de requêtes http est réduit
• Il est désormais possible de développer des applis en SSR avec les mêmes librairies que pour le front (React, Vue ou Angular) en ajoutant un framework SSR par dessus.

Les inconvénients

• Il y a des temps de chargement visibles entre chaque page
• La charge serveur peut être plus importante car le travail auparavant fait sur la machine cliente est maintenant fait sur le serveur
• L'environnement de déploiement du front-end est plus complexe car il ne nécessite plus seulement un hébergement web statique, mais un environnement NodeJS par exemple.

Conclusion

Le SSR apporte des solutions aux problèmes que posent les SPA notamment sur le référencement naturel du site, mais il n'y a pas de meilleure solution entre les deux, vous devez faire le choix entre du SSR ou une SPA en fonction des besoins et des contraintes du projet.

Ne vous laissez pas influencer par la mode du moment, prenez des décisions documentées et réfléchies !