Qu'est ce que le SSR ?

SSR server side rendering en développement web : améliore le SEO et la sensation de rapidité

Le rendu côté serveur d'une page web ou Server Side Rendering (SSR) est une technique de développement web qui consiste à créer les pages html côté serveur pour les envoyer toutes faites au navigateur. Les pages interagissent ensuite avec le serveur en ajax. Le rendu est plus rapide, très proche d'une application installée en locale. Cette technique est beaucoup utilisée dans les progressives web app.

 

Pourquoi le SSR ?

Tout d'abord, la fluidité d'interaction d'un site web est moins bonne qu'une application native. C'est un facteur limitant important des sites web notamment sur les terminaux mobiles : les applications natives sont plus rapides car le code est déjà sur le terminal alors qu'un navigateur web doit recevoir le code et l'interpréter pour finalement mette en forme la page.

Seconde raison, les pages web de certains sites web utilisant beaucoup de javascript manipulent les pages web côté client (c'est du Client Side Rendering, rendu côté serveur). Or cela pose des problèmes pour les moteurs de recherche qui ont du mal à interpréter le javascript. Résultat, ils sont moins bien référencés.

 

Avantages et inconvénients de la solution

Le SSR est consiste à générer le rendu d'un site web ou d'une app sur le serveur et de l'envoyer au navigateur. Les développeurs web ont ainsi mis au point des techniques pour que les frameworks front soient isomorphes : le code peut être interprété côté client ou serveur, comme avec Angular ou React. L'historique de navigation est également conservé et disponible via le bouton 'back' du navigateur.

Cependant l'implémentation du SSR reste complexe. Elle a un coût de développement et de maintenance plus élévée que les techniques classiques.

 

En résumé, cette technique permet une sensation de rendu très rapide du site et une bonne interprétation par les moteurs de recherche. Cette technique fait partie de l'ensemble des technologies utilisées dans une PWA.

 

 

Besoin d'aide dans sur votre projet de dévelopement web ?

Notre offre de conseil

 

Crédit photo : Ricardo Gomez Angel