Rendu côté client (CSR)

Le

Client-Side Rendering (CSR) est une technique courante dans le développement Web moderne, utilisée pour créer des applications interactives et dynamiques. Avec cette technique, nous supprimons la responsabilité du rendu de la page du serveur et la plaçons du côté client, laissant le serveur s'occuper de ce qui est le plus important pour lui, les règles métier. Cette séparation a permis d'offrir une expérience utilisateur plus fluide et dynamique et permet la création de nouveaux types d'applications. Les avantages sont divers, mais en même temps il y a des compromis qui doivent être évalués dans chaque projet s'il vaut ou non la peine d'adopter cette technique.

Qu'est-ce que le Rendu côté client (CSR) ?

Le

Rendu côté client ou simplement CSR, est une technique de développement d'applications dynamiques où le rendu d'interface s'effectue côté client (navigateur). Ceci est différent de la façon dont cela se faisait avant que cette technique ne devienne populaire, où le serveur était responsable du rendu de la page, renvoyant au client un fichier HTML avec tout le contenu déjà assemblé.

Avec CSR nous passons le rôle de rendu de la page au navigateur (client). Le serveur envoie simplement un fichier HTML de base qui contient en interne des liens vers des fichiers Javascript. Dès réception de ce HTML, le navigateur télécharge les fichiers Javascript référencés qui sont responsables du rendu du contenu de la page. L'avantage de CRS est qu'une fois les fichiers Javascript chargés, le contenu peut être mis à jour dynamiquement sans dépendre de nouvelles requêtes adressées au serveur. Rendre l’expérience de navigation plus fluide pour l’utilisateur. La RSE est généralement utilisée dans les applications où il existe un besoin d'interactions en temps réel ou de contenu très dynamique, par exemple dans les applications d'une seule page (SPA). Être une solution pour les pages internes, les tableaux de bord ou les systèmes où il n'y a pas besoin de référencement.

Comment fonctionne le Rendu côté client ?

Un exemple de flux de rendu utilisant le Rendu côté client serait :

1. L'utilisateur accède à une page Web, qui envoie en interne une requête au serveur.
   

2. Le serveur reçoit la requête et répond en envoyant du HTML de base contenant pratiquement uniquement des liens vers des fichiers JavaScript et CSS.
   

3. Le navigateur télécharge ce HTML et, une fois terminé, envoie de nouvelles requêtes pour télécharger les fichiers JavaScript et CSS référencés dans le HTML.
   

4. Une fois les fichiers JavaScript téléchargés, ils seront exécutés et le processus de rendu de la page sera effectué.
   

5. À partir de ce moment, JavaScript contrôle l'ensemble de l'application et des interactions des utilisateurs, mettant à jour le contenu de la page de manière dynamique, sans nouvelles requêtes au serveur.

Avantages du Rendu côté client

• Vitesse : la navigation entre les pages au sein d'un CSR est extrêmement rapide, car il n'est pas nécessaire de faire plusieurs requêtes au serveur après le chargement initial.
• Expérience utilisateur : l'utilisation de la RSE est très compréhensible et fonctionne bien, offrant une expérience similaire aux applications natives.
• Séparation des préoccupations : La RSE permet la séparation entre le Front-end et le Back-end, permettant au Front-end d'être entièrement géré par JS, tandis que le Back-end ne s'occupe que des données et de la logique métier.

Inconvénients du Rendu côté client

• Charge JS élevée : dans les applications volumineuses, les fichiers JS peuvent devenir très lourds, ce qui peut nuire à l'expérience utilisateur, en particulier lors du chargement initial de l'application.
• Problèmes de référencement : comme le contenu de la page est rendu côté client, les moteurs de recherche ont des difficultés à indexer le contenu, car ils ont besoin du HTML rendu et dans une application avec CSR, le HTML est pratiquement vide. Cela peut être un inconvénient pour les applications qui dépendent du référencement telles que les pages de destination et les e-commerces.
• Dépendant du client : comme l'application s'exécute côté client, il existe une dépendance à l'égard de la quantité de ressources dont elle dispose, ce qui peut affecter négativement l'expérience utilisateur si son appareil dispose de peu de ressources. De plus, si l'exécution de JavaScript est désactivée sur l'appareil, l'application ne fonctionnera pas.

Conclusion

Dans cet article, nous présentons les principaux points importants concernant le recours à la RSE, en présentant les fondamentaux ainsi que ses avantages et inconvénients. A travers le flux RSE, nous connaissons les principales étapes du cycle de vie de la RSE. Nous pouvons voir l’importance de JavaScript pour fournir des applications qui s’exécutent entièrement côté client. Malgré les avantages du CSR liés à l'expérience utilisateur, il est clair que cette technique de rendu présente certains inconvénients liés à une charge JavaScript élevée et à des problèmes liés au référencement.

Pour surmonter les limites du CSR, nous disposons de solutions telles que la Génération de site statique (SSG) et le Rendu côté serveur (SSR). Dans SSG, les pages sont générées de manière statique pendant la période de build, ce qui donne un code HTML prêt à être livré au client. Et dans le cas de SSR, le rendu se fait côté serveur, qui répond avec du HTML déjà rendu au client.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!