Architecture d’application Web
Sommaire
- 1- Objectifs
- 2- Présentation
- 3- Qu'est-ce que l'architecture d'application Web?
- 4- Architectures d'applications Web les plus populaires
- 4.1- CSR (Client Side Rendering)
- 4.2- SSR (Server Side Rendering)
- 4.3- Rendu côté serveur et rendu côté client
- 4.4- Avantages et inconvénients
- 5- Exercices d'application
- 5.1.1- Sommaire du cours JSP
Architecture d’application Web
-
Objectifs
- Comprendre l’architecture d’application Web.
-
Présentation
- Une application Web est comme une application informatique normale, sauf qu’elle fonctionne sur Internet. Comme tout le monde est sur le Web ces jours-ci, la plupart des développeurs cherchent à bénéficier des applications Web et à attirer le plus d’utilisateurs possible via des offres opportunes.
- Avant de développer une application Web, il est important de choisir le type d’architecture d’application Web ainsi que le modèle des composants d’application Web.
-
Qu’est-ce que l’architecture d’application Web?
- L’architecture des applications Web décrit les interactions entre les applications, les bases de données et les systèmes middleware sur le Web.
- C’est un cadre qui comprend des relations et des interactions entre tous les composants de l’application.
- L’architecture d’application Web constitue tous les composants, sous-composants et échanges d’applications externes de l’application Web finale.
- Dès que l’utilisateur clique sur le bouton OK après avoir tapé une URL dans la barre d’adresse d’un navigateur Web, il demande cette adresse Web particulière. Le serveur envoie des fichiers au navigateur en réponse à la demande effectuée. Le navigateur exécute ensuite ces fichiers pour afficher la page demandée.
- Enfin, l’utilisateur peut interagir avec le site Web. La chose la plus importante à noter ici est le code analysé par le navigateur Web. Une application Web fonctionne de la même manière.
- Ce code peut avoir ou non des instructions spécifiques indiquant au navigateur comment répondre aux différents types d’entrées utilisateur.
- Par conséquent, une architecture d’application Web doit inclure tous les sous-composants ainsi que les échanges d’applications externes pour l’ensemble de l’application logicielle, dans le cas susmentionné, qui est un site Web.
- L’architecture des applications Web est indispensable dans le monde moderne car une grande partie du trafic réseau mondial, ainsi que la plupart des applications et des appareils, utilisent la communication basée sur le Web.
- Une architecture d’application Web doit non seulement traiter de l’efficacité, mais également de la fiabilité, de l’évolutivité, de la sécurité et de la robustesse.
-
Architectures d’applications Web les plus populaires
- Les deux architectures d’applications Web les plus populaires sont le rendu côté serveur (SSR) et le rendu côté client (CSR).
-
CSR (Client Side Rendering)
- La génération côté client (Client-side rendering ou CSR) permet au site web d’être mis à jour presque instantanément en navigant sur des pages différentes mais nécessite au début un téléchargement intial plus important et un travail de rendu supplémentaires côté client.
- Le rendu côté client (CSR) permet de mettre à jour le site Web presque instantanément dans le navigateur lors de la navigation sur différentes pages, mais nécessite davantage de succès de téléchargement initial et de rendu supplémentaire au début du client. Le site Web est plus lent lors de la première visite, mais beaucoup plus rapidement lors des visites suivantes.
- Le rendu côté client est une approche relativement nouvelle du rendu des sites Web, et il n’est vraiment devenu populaire que lorsque les bibliothèques JavaScript ont commencé à l’intégrer.
- Lorsque nous parlons de rendu côté client, il s’agit de rendre le contenu dans le navigateur à l’aide de JavaScript. Ainsi, au lieu d’obtenir tout le contenu du document HTML lui-même, un document HTML simple avec un fichier JavaScript lors du chargement initial lui-même est reçu, ce qui rend le reste du site à l’aide du navigateur.
-
SSR (Server Side Rendering)
- La génération côté serveur (Server-side rendering ou SSR) signifie qu’un site web est généré sur le serveur
- Le rendu côté serveur (SSR) signifie qu’un site Web est rendu sur le serveur. Ainsi, le premier chargement est plus rapide, mais pour naviguer entre les pages, vous devez tout télécharger à chaque fois. Il fonctionne très bien sur tous les navigateurs et dispose de nombreux outils pour faciliter le processus de développement, mais sa vitesse de chargement et ses performances globales sont donc gênées – le chargement de chaque page nécessite un nouvel aller-retour vers le serveur.
- Dans le rendu côté serveur, lorsqu’un utilisateur envoie une demande à une page Web, le serveur prépare une page HTML en récupérant des données spécifiques à l’utilisateur et les envoie à la machine de l’utilisateur via Internet. Le navigateur construit ensuite le contenu et affiche la page. Tout ce processus de récupération des données de la base de données, de création d’une page HTML et de son envoi au client se produit en quelques millisecondes.
-
Rendu côté serveur et rendu côté client
- La principale différence est que pour SSR, votre réponse de service au navigateur est le HTML de votre page qui est prêt à être rendu, tandis que pour le CSR, le navigateur obtient un document assez vide qui renvoie à votre javaScript.
- Cela signifie que votre navigateur commencera à rendre le HTML à partir de votre serveur sans avoir à attendre que tout le javaScript soit téléchargé et exécuté.Dans les deux cas, React devra être téléchargé et passer par le même processus de construction d’un DOM virtuel et d’association d’événements pour rendre la page interactive mais pour SSR, l’utilisateur peut commencer à afficher la page pendant que tout cela se passe.
- Pour le monde de la RSE, vous devez vouloir que tout ce qui précède se produise, puis le DOM virtuel déplacé vers le DOM du navigateur pour le page pour être consultable.
-
Avantages et inconvénients
- Les sites Web sont faciles à explorer, ce qui signifie un meilleur référencement (optimisation des moteurs de recherche)
- Le chargement de la page initiale est plus rapide.
- Idéal pour les sites statiques où vous n’avez pas de contenu dynamique
- Interactions de site riches
- Après le chargement initial, le site Web est très rapide
- Idéal pour les applications Web.
- Requêtes serveur fréquentes.
- La page s’affiche lentement
- Recharge pleine page.
- Interactions de base sur le site.
- SEO faible s’il n’est pas mis en œuvre correctement.
- La charge initiale est peut-être trop lente
- Dans la plupart des cas, nécessite une bibliothèque externe.
-
Exercices d’application
| Rendu côté serveur | Rendu côté client | |
|---|---|---|
| Les Avantages: |
|
|
| Les Inconvénients: |
|
|
