Comprendre les SPA(Single page Application)

le Frontend et les SPA(Single Page Application), Server Side Rendering(SSR) et Client Side Rendering(CSR) parlons en...!

De nos jours, dans le monde du developpement web, y a un mot qui revient beaucoup surtout en frontend web : les SPA(Single Page Application).

Au fait pourquoi les framework frontend web sont tous basés sur les SPA?

La difference notoire entre une application desktop (un client lourd) et une application web, etait du au fait que les applications web, differement des applications lourdes, sont basées sur les échanges de communications au travers du protocole HTTP avec un serveur web, ce protocole est unidirectionel et sans mémoire dans ce sens que quand un navigateur ouvre une requete HTTP vers un serveur web, le serveur répond en lui retournant soit du HTML ou du JSON et la commnunication se termine là... vous avez compris? la communication se termine et si dans la meme page on veut faire une autre requete, le server ne se rappelle plus que la requete vient de la meme page(et donc du meme utilisateur), donc en terme simple, quand vous ouvrez une page web, non seulement le navigateur demande le contenu de la page HTML, mais aussi il doit demander parallelement au serveur les images, les fichiers css, les fichiers javascript etc.. en faisant des requetes distinctes en sous tache et pour chaque requete le serveur ne sait pas qu'il est entrain de repondre aux requetes du meme navigateur pour constituer ou mieux ,construire ou generer la meme page(si vous faite F12 sur google chrome vous allez voir tout le flux de toutes les requetes que fait google chrome quand vous demandez une page web).

ces requetes du navigateur, la plupart du temps sont sincrone, c'est à dire c'est quand le navigateur reçoit une reponse qui procède à l'étape suivante et en fait une autre, donc le flux de la page est construit de maniere sequentielle au fur et a mesure qu'il reçoit les reponses du serveur web.

Donc quand l'utilisateur dans ce schema, fait par exemple un click sur un bouton par exemple sur amazon pour filtrer les produits qu'il recherche, le navigateur doit faire de nouveau une requete ou des requetes sur le serveur et le serveur doit retourner des reponses et la page doit se charger de nouveau.

On peut constater que pour une application pleine de requetes, ce modèle a des limites car il faut recharger la page tout le temps pour n'importe quelle inter-action(un click par exemple) avec la page, raison pour laquelle on preferait faire des applications desktop au lieu des applications web.

les SPA ont éliminé le fait de pouvoir recharger la page a chaque click ou interaction en utilisant la programmation asincrone, dans ce cas, toute interaction avec la page qui necessite des nouvelles données du serveur est fait en sous tache de manière asincrone et dès que le resultat est pret, le navigateur l'affiche sans que l'uitilisateur ne s'en aperçoivent et ainsi on a l'impression de faire la meme chose comme dans une application desktop.

La SPA c'est ce qui est à la base de tous les framework Frontend : Angular, React, Vuejs. Dans ces framework, toutes les interactions avec la page web sont utilisées pour construire en sous tache des requetes HTTP à un endpoint API REST (lisez dans ma page le modele MVC explique a un follower), qui retourne generalement du JSON qui est ensuite utilisé par le framework pour construire la page web, on appelle ce procedé du "Rendering" et ce concept de creer ou generer la page web à l'interieur du navigateur et non a partir du serveur est appellé "Client Side Rendering", en opposé au "Serveur Side Rendering" ou la page HTML est construite depuis le serveur.

les SPA avec la CSR ont apporté enormement dans la manière de construire les pages web de nos jours car les pages web n'ont pratiquement plus rien à envier à leurs homologues desktop et du coup les SPA c'est l'unique solution possible si on veut faire voir sa page sur des applications mobile fonctionnée avec une bonne qualité. Cependant le Client side rendering a aussi ses désavantages, il souffre enormenent des problemes lié au SEO(Search Engine Optimization), donc si on a un site qu'on veut referencer et faire de manière a ce que les crawler des moteurs de recherche puissent facilement trouver les contenus, alors les SPA basés sur le CSR ne sont pas la bienvenue car comme je vous ai dit, toute la page est construite dans le navigateur quand l'utilisateur demande la page, les moteurs de recherche quand à eux, s'attendent à avoir dejà la page au complet quand le crawler passe les visiter et du coup comme la page dans le CSR est fait dans le browser, le crawler n'aura pas le contenu du site, donc pas de referencement.

Le web a toujours fonctionner avec le SSR, dans ce cas la reponse du serveur retourne dejà du HTML et la page web ne fait que l'affichée sans la reconstruire, bref la page est construite depuis le serveur, c'est ainsi que par exemple php fonctionne, vous demandez une page fait en php, le serveur vous retourne une belle page web dejà complete sans php et le navigateur a pour seul job de l'afficher sans avoir besoin de la reconstruire comme dans le CSR.

Mais de nos jours, tous ses framework frontend sont entrain de multiplier les strategies pour faire du SPA aussi avec du SSR, par exemple angular propose dejà des librairies qui permettent de transformer son site angular en SPA + SSR et ainsi profité du SEO. Microsoft Blazor, qui lui fait du SPA mais avec les technologies du Web Assembly, fait la meme chose en utilisant SegnalR pour faire le SSR.

j'esperes que pour ceux qui avaient des zones d'ombres sur cet argument, j'ai essaye de mon mieux de l'éclaircir, du moins s'il y a des doutes je repondrai à vos questions comme toujours.

Happy Coding

---

---

Share

Comments (0)

Leave A Comment

Your Name:
Comment: