Types d'applications Web : en termes simples et avec des mèmes

🤓 De quoi parle cet article ?

Vous avez souvent entendu des mots comme « SPA », « SSR », « PWA », mais ils sonnent tous comme des sorts de Poudlard ? Alors cet article est pour vous. Nous allons analyser les types d'applications Web, leurs différences, celles qui sont rapides, celles qui sont à la mode et celles qui fonctionnent simplement. Avec des mèmes, des tableaux et des exemples !

/

🧱 Technologies de base : la base de tout site Web

Toutes les applications Web sont créées à l'aide de :

• HTML — construire le squelette de la page

• CSS — nous faisons les choses joliment

• JavaScript — nous animons et interagissons

Mais comment exactement l'application est organisée — peut être très différente. Et c'est là que commence la magie du choix de l'approche.

🌐 Principaux types d'applications Web

🏘️ Applications multipages (MPA)

Cas simple : un ensemble de pages prêtes à l'emploi

Comme un dossier avec des fichiers sur un ordinateur : vous ouvrez about.html et vous regardez les informations sur l'entreprise.

Avantages :

• simplicité

• facilité de mise en cache

Inconvénients :

• tout se recharge lors du passage d'une page à l'autre 🐢

Quand cela convient : pages de destination, cartes de visite, sites simples.

Plus difficile : le serveur génère des pages

Vous allez sur le site, le serveur est comme ceci :

« Attends, laisse-moi te préparer une page à la volée. »

Par exemple, comme sur les forums ou dans les boutiques en ligne :

• Le serveur demande des données

• Collecte HTML

• Il le donne à l'utilisateur

Avantages :

• données toujours à jour

• moins de JavaScript, donc plus rapide pour les appareils plus faibles

Inconvénients :

• charge du serveur

• pas de transitions instantanées

📌 Fait mémorable :

Lorsque l'utilisateur clique sur le lien, le navigateur est comme : « Redémarrage ! », même si vous vouliez simplement ouvrir la page de profil suivante 🙃

🪄 Applications d'une seule page (SPA)

Toute la magie est dans JavaScript. Vous allez sur le site, et plus de redémarrages.

Avantages :

• transitions instantanées

• expérience comme dans les applications natives

Inconvénients :

• tout dépend de JavaScript

• le premier affichage peut être long

🔧 Exemples : Trello, Google Docs, Twitter (en partie)

🔄 Rendu sur le client (CSR)

Le navigateur charge un tas de JS, et seulement après - « Oups, je suis un site ! »

Inconvénients : si Internet est lent, alors pendant que JavaScript se charge, l'utilisateur regarde un écran blanc. 🕳️

🧠 Rendu côté serveur (SSR)

Le serveur renvoie d'abord la page terminée, puis JavaScript se connecte.

Idéalement :

• SEO

• Première impression rapide de la page

📦 Utilisé par : Next.js, Nuxt, SvelteKit

🛠️ Génération statique (SSG)

Imaginez un site de blog. Les articles sont rédigés en Markdown, générés au format HTML à l'avance et simplement stockés sur le serveur.

Outils : Astro, Eleventy, Hugo, Gatsby

Avantages :

• chargement ultra-rapide

• hébergement simple (même sur GitHub Pages)

Inconvénients :

• les données ne sont mises à jour que lors d'un nouveau montage du site

📝 Convient pour la documentation, les portfolios, les pages de destination.

🚀 PWA — applications Web progressives

PWA, c'est comme si votre site se faisait passer pour une application mobile :

• fonctionne hors ligne

• notifications push

• installé sur le téléphone

✨ Google et Twitter promeuvent activement l'idée de PWA.

📱 Lorsque vous devez créer une application sans boutique d'applications, mais avec une UX native.

🧠 Conclusion

Voici un petit guide :

💬 Résumons avec un mème :

Développeur : « J'ai fait un SPA avec SSR, SSG et PWA. » Client : « Est-ce que cela peut être imprimé ? »