Progressive Web App PrestaShop : SSR ou CSR, quelle est la meilleure solution ?
Aujourd’hui, nous allons aborder un point technique concernant les PWA PrestaShop (Progressive Web App). Plus précisément, nous allons regarder les différences qu’il y a entre le server-side rendering (SSR) et le client-side rendering (CSR). Un SSR vs CSR qui, vous le verrez, ne désignera pas de grand gagnant puisque le choix de la stratégie de rendu dépendra des spécificités techniques de votre application mobile hybride pour PrestaShop.
Quand est-ce que je dois choisir du Server-Side Rendering (SSR) ?
Nous parlons de Server-Side Rendering (SSR) quand le navigateur envoie une requête au serveur et que le serveur envoie sous la forme d’une réponse http, la page à afficher.
Avantages :
- Le SSR permet une meilleure indexation SEO notamment car les robots d’indexation peuvent accéder et lire le contenu de la page beaucoup plus facilement que s’il doit être interprété par le navigateur.
- Généralement le SSR permet de meilleures performances puisque la réponse du serveur est bien souvent prête et le navigateur n’a plus qu’à l’afficher. Nous pouvons aussi combiner plus efficacement le cache serveur et le cache navigateur pour améliorer les performances.
Inconvénients :
- La plupart du contenu dynamique ne peut pas être géré côté serveur.
- Il est souvent plus cher de concevoir une Progressive Web App en SSR puisque cela demande de bien comprendre ce concept et de prendre en considération tout ce que cela peut engendrer côté serveur ou côté client. Nous parlerons alors de Isomorphic JavaScript ou encore de Universal JavaScript pour mettre en place le SSR.
- Le déploiement de la PWA demande aussi plus de complexité puisqu’un serveur traditionnel fonctionnant avec Apache et/ou Nginx ne suffit plus : il faut pouvoir lancer un serveur NodeJS.
Quand est-ce que je dois choisir du Client-Side Rendering (CSR) ?
Contrairement au SSR, nous parlons de CSR quand c’est le navigateur qui interprète le JavaScript afin de rendre la page et l’afficher. A ce moment, le navigateur reçoit seulement du serveur une page HTML presque vide et des fichiers JavaScript permettant de générer le contenu, à la différence du SSR où la page serait arrivée du serveur déjà prête à être affichée.
Avantages :
- Une fois chargée par le navigateur, elle est très fluide et rapide pour afficher du contenu dynamique. Les systèmes de cache navigateur sont efficaces dès la seconde ouverture.
- La plupart des sites contiennent obligatoirement du CSR : dès lors que vous avez un composant dynamique tel qu’un carousel d’images, un menu dépliant ou encore un simple datepicker par exemple.
Inconvénients :
- Le principal désavantage de cette stratégie est qu’elle ne permet pas à vos pages d’être indexées efficacement dans les moteurs de recherche qui ont beaucoup de mal à lire le contenu généré par le CSR. Une technique appelée “prerendering” existe alors afin de servir aux robots d’indexation des versions pré-rendues des pages de l’application mobile.
- Un autre désavantage est la consommation de ressource utilisée par le périphérique du client et le temps allongé de la première ouverture de la PWA que cela engendre.
Pour faire bref :
- Le Client-Side Rendering est la solution la plus simple à mettre en place lorsque nous avons une Progressive Web Apps PrestaShop ayant beaucoup de contenu dynamique et d’interaction utilisateur. La problématique de SEO peut notamment être améliorée avec la technique du prerendering.
- Quant à lui, le Server-Side Rendering est la solution la plus adaptée à des sites statiques, sans contenu dynamique, puisqu’il permet d’améliorer considérablement le référencement du contenu sans avoir à gérer la problématique de prerendering ou de Universal / Isomorphic JavaScript.
- La technique du JavaScript Universel est sans doute la plus compliquée à bien mettre en place mais aussi la plus souple puisque cela nous permet de choisir précisément ce qui est rendu côté serveur et ce qui est rendu côté application. Il est aussi possible de coupler ce choix avec du prerendering.