Retour à l'accueil
💻

CSR - Client-Side Rendering

Rendu côté client : tout se passe dans le navigateur

🍕 Analogie : La Pizza Livrée

Imagine que tu commandes une pizza. Avec le CSR, tu reçois :

  • 📦 Une boîte vide (HTML minimal)
  • 📋 Une recette (JavaScript)
  • 🧑‍🍳 Toi-même tu dois cuisiner la pizza (le navigateur génère le contenu)

Le serveur ne fait pas grand-chose, c'est ton navigateur qui fait tout le travail !

⚙️ Comment ça marche ? (Version simple)

1

Tu ouvres la page

Le serveur t'envoie un HTML quasi-vide + un gros fichier JavaScript

2

Ton navigateur charge le JavaScript

Le JavaScript se télécharge et s'exécute dans ton navigateur

3

React prend le contrôle

React crée tous les éléments de la page (boutons, textes, images)

4

Les données arrivent

Le JavaScript fait des appels API pour récupérer les données

5

La page s'affiche enfin

Tout est maintenant visible et interactif !

✅ Les Avantages

Super Interactif

Tu peux faire des choses en temps réel : chat, streaming, animations. Pas besoin de recharger la page !

Pas de Charge Serveur

Le serveur ne fait presque rien, c'est ton navigateur qui bosse. Moins de coûts pour le serveur !

Expérience Fluide

Une fois chargé, tout est instantané. Pas de rechargement de page, transitions smooth !

❌ Les Inconvénients

⚠️

SEO Moins Bon

Google voit d'abord une page vide. Il doit attendre que le JavaScript charge pour voir le contenu. Pas idéal pour le référencement.

⚠️

Premier Chargement Lent

Il faut attendre que tout le JavaScript se télécharge avant de voir quelque chose. C'est un peu frustrant au début.

⚠️

Pas de JavaScript = Pas de Site

Si quelqu'un désactive JavaScript, il ne voit rien. Problème d'accessibilité.

🎯 Quand utiliser le CSR ?

✅ Utilise CSR pour :

  • 💬 Les chats (Discord, Slack)
  • 📊 Les dashboards interactifs
  • 🎮 Les apps web (Gmail, Notion)
  • 🎨 Les éditeurs en temps réel
  • 📱 Les apps mobiles web

❌ Évite CSR pour :

  • 📰 Les blogs (besoin SEO)
  • 🛒 Les e-commerce publics
  • 📚 Les sites de documentation
  • 🌐 Les landing pages marketing
  • 🔍 Les sites qui doivent être trouvés sur Google

💡 Exemple dans notre projet

La page /chat utilise le CSR. Voici pourquoi c'est parfait :

→Le chat doit être interactif en temps réel
→Les réponses IA arrivent token par token (streaming)
→Pas besoin de SEO (contenu privé, conversation personnelle)
→L'état (messages, loading) change constamment

📝 Résumé en une phrase

CSR = Le serveur envoie une page vide, c'est ton navigateur qui fait tout le travail pour créer le contenu.