🚀 Explorer le monde du développement Web : SPA vs SSR vs SSG 🌐 | par Davidtimilehin | novembre 2023

Avant l’essor des applications à page unique (SPA), du rendu côté serveur (SSR) et de la génération de sites statiques (SSG), les sites Web étaient principalement construits à l’aide d’une approche traditionnelle de rendu par serveur.

Cette approche implique que le serveur génère des pages HTML et les envoie au client lorsqu’un utilisateur demande une nouvelle page.

Les fichiers HTML reposent sur un serveur, en attente des demandes des clients. Lorsqu’un client recherche un fichier, il traverse les protocoles réseau, obtenant les détails DNS et l’adresse IP du serveur. Une fois la communication établie via des protocoles comme TCP, le serveur envoie rapidement le fichier HTML demandé au client. Cet échange se termine par la réception par le client du contenu essentiel, prêt à façonner la présentation visuelle de la page web.

À mesure qu’Internet et le Web gagnaient en popularité, les ingénieurs et les développeurs cherchaient en effet des moyens d’améliorer la vitesse et l’efficacité des processus Web.

Cette exploration a conduit au développement de diverses technologies, cadres et modèles architecturaux, tels que les applications à page unique (SPA), le rendu côté serveur (SSR) et la génération de sites statiques (SSG), entre autres.

Ces innovations visaient à améliorer l’expérience utilisateur, à optimiser les performances et à répondre aux besoins changeants des applications Web dans un paysage en ligne dynamique.

Les SPA sont des applications Web qui chargent une seule page HTML et mettent à jour dynamiquement le contenu à mesure que l’utilisateur interagit avec l’application.
Cela signifie que lorsqu’un utilisateur visite un site Web utilisant JavaScript, le navigateur télécharge les fichiers JavaScript et les stocke localement.

Cela peut améliorer les performances du site Web, car le navigateur n’aura pas besoin de télécharger à nouveau les fichiers JavaScript à chaque fois que l’utilisateur visite le site Web.

Le navigateur mettra également à jour le code HTML avec le code JavaScript à la demande de l’utilisateur. Cela signifie que lorsqu’un utilisateur interagit avec un site Web utilisant JavaScript, le code JavaScript sera exécuté et le code HTML sera mis à jour en conséquence. Cela permet de créer des sites Web dynamiques et interactifs.
Les exemples incluent Gmail, Facebook et Twitter.

Le rendu côté serveur (SSR) dans le développement Web implique que le serveur crée le code HTML d’une page Web avant de le transmettre au navigateur. Dans cette approche, la responsabilité du navigateur est uniquement d’afficher le HTML, et non de le télécharger et de le stocker comme dans le cas des SPA, éliminant ainsi le besoin d’analyser et d’exécuter du JavaScript pour le rendu.

Cela améliore non seulement la vitesse de chargement initiale des pages, mais contribue également à une expérience utilisateur globalement améliorée.

Cela entraînera une augmentation globale des performances de l’application.

SSG est une méthode de développement Web qui pré-rend le HTML, le CSS et le JavaScript d’un site Web dès le début pendant le processus de création au lieu de les générer dynamiquement pour chaque demande de l’utilisateur.

Cette approche offre plusieurs avantages, notamment des temps de chargement des pages plus rapides et une optimisation améliorée des moteurs de recherche (SEO) en raison de la facilité avec laquelle les moteurs de recherche peuvent indexer et explorer le contenu statique.

Comment fonctionne SSG :

1. Création de contenu : Les développeurs créent du contenu en utilisant un langage de balisage comme Markdown ou un système de gestion de contenu (CMS), par exemple WordPress.
2. Récupération de données : Les frameworks SSG extraient les données des API ou des bases de données et les intègrent dans le contenu.
   Dans NextJs, ces données peuvent être appelées en utilisant getStaticPaths méthode de récupération de données, qui ne s’exécutera que lors de la construction en production, elle ne sera pas appelée pendant l’exécution.
3. Modèle : Le contenu est combiné avec des modèles pour générer des fichiers HTML statiques.

Comment choisir ?
SPA pour des applications dynamiques en temps réel.
SSR pour les sites riches en contenu nécessitant une optimisation SEO.
SSG pour un contenu statique ultra-rapide avec une excellente sécurité.
Considérations :
Évaluer les besoins de performances.
Exigences SEO.
Complexité des applications.

J’espère que cet article vous a apporté quelque chose, si oui ?
Poursuivons la conversation !
Quelle est votre préférence et votre expérience avec ces approches ? Partagez vos idées !

Jusqu’à la prochaine fois, je reste fidèle.

to medium.com

---

Abonnez-vous à notre page Facebook: https://www.facebook.com/mycamer.net
Pour recevoir l’actualité sur vos téléphones à partir de l’application Telegram cliquez ici: https://t.me/+KMdLTc0qS6ZkMGI0
Nous ecrire par Whatsapp : Whatsapp +44 7476844931

---