← Retour aux faqs


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 avantages du SSR par rapport au CSR

Le SSR s'oppose au Client Side Rendering (CSR) qui consiste à construire la page côté navigateur (le client). Si la technique de CSR permet une fluidité de l'application proche des applications natives, elle pose 2 problèmes : le référencement et le temps de chargement.

Côté référencement, les moteurs de recherche ont du mal à explorer les pages en CSR car il faut interpréter du code javascript alors que pour les pages SSR, le html est déjà prêt.

Côté temps de chargement, une page en CSR peut mettre un peu de temps avant de pouvoir réagir au clic car le squelette html de l'application doit être construit à la volée. Le temps de chargement n'est pas plus important mais la disponibilité réelle de l'app est retardée.

Au contraire, avec le SSR les pages sont disponibles plus vite et le référencement est optimal. Mais cependant l'interaction avec la page est moindre puisqu'il faut recharger toute la page.

 

Alors SSR ou CSR ?

Pour contourner ces problèmes structurels, les développeurs ont fait évoluer les techniques et les ont mélangées : SSR et CSR sont complémentaires et aucune application n'est purement SSR ou CSR. Si le SSR est la technique traditionnellement utilisée pour servir les pages web, elle a dû évoluer pour  permettre les interactions asynchrones entre le serveur et le client (notamment grâce aux requêtes asynchrones ajax et à l'hydratation des pages) et des morceaux de pages sont interprétés par le client. 

Côté CSR, les développeurs web ont 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 et le référencement naturel est optimal.

Cependant l'implémentation d'applications isomorphes reste complexe. Elle a un coût de développement et de maintenance plus élévée que les techniques classiques, il faut en tenir compte lors de la rédaction du cahier des charges de votre site ou application web.

 

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

Notre offre de conseil

 

Références pour aller plus loin : 

https://www.viget.com/articles/what-even-are-react-server-components/

 

 

Crédit photo : Ricardo Gomez Angel