CSR & SPA

Avant de plonger dans le Server-Side Rendering (SSR), il est important de comprendre son ce qu’est le Client-Side Rendering (CSR), souvent associé aux Single-Page Applications (SPA).

SPA

Une Single-Page Application (SPA) est une application web qui fonctionne dans une seule page HTML.
Au lieu de charger de nouvelles pages à chaque interaction, la SPA met à jour dynamiquement le contenu de la page existante.

Typiquement une application comme Gmail est une SPA car lorsque vous naviguez entre vos emails, vous ne voyez pas la page se recharger complètement.
Seule une partie du contenu est mise à jour, offrant une expérience utilisateur plus fluide et rapide.

Avantages des SPA :

• Expérience utilisateur améliorée : Navigation fluide et rapide, interactions plus dynamiques et réactives (on peut faire de belles transitions de page =D).
• Développement simplifié : Séparation claire entre le front-end et le back-end, utilisation d’APIs pour la communication.
• Performances accrues (dans certains cas) : Réduction du nombre de requêtes au serveur, chargement plus rapide des éléments dynamiques.

Exemples de SPA : Gmail, Google Maps, Netflix, Facebook.

CSR

Le Client-Side Rendering (CSR) est une technique de rendu utilisée par les SPA.
En CSR, le serveur envoie une page HTML minimale au navigateur, contenant principalement du JavaScript. C’est ensuite le navigateur qui récupère les données nécessaires et construit dynamiquement l’interface utilisateur.

En pratique :

1. Le navigateur demande la page web au serveur.
2. Le serveur renvoie une page HTML minimaliste avec du JavaScript.
3. Le JavaScript, exécuté dans le navigateur, fait des appels à des APIs pour récupérer les données.
4. Le JavaScript utilise ces données pour construire l’interface utilisateur et la “rendre” dans la page.

Avantages du CSR :

• Expérience utilisateur fluide et interactive.
• Réduction de la charge du serveur.
• Facilité de développement et de maintenance.

Inconvénients du CSR :

• Performance initiale potentiellement plus lente : Le navigateur doit télécharger et exécuter du JavaScript avant d’afficher le contenu.
• Problèmes de SEO : Les moteurs de recherche peuvent avoir du mal à indexer le contenu généré dynamiquement par JavaScript.
• Problèmes d’accessibilité : Le contenu peut ne pas être accessible à tous les utilisateurs, notamment ceux qui utilisent des technologies d’assistance.

Le CSR et les SPA offrent une bonne expérience utilisateur, mais présentent certains défis en termes de performance initiale et de SEO.
C’est là que le SSR entre en jeu, en proposant une alternative pour pallier ces limitations.

Exercice

Créer un blog simple avec React et TypeScript

Objectif

Mettre en pratique vos connaissances de React et TypeScript pour créer un blog simple qui affiche une liste des todos et les détails d’un todo spécifique.

Consignes

1. Créer une page d’accueil (/) qui affiche une liste d’todos de blog :

   • Récupérer la liste des todos depuis l’API Vercel (https://jsonplaceholder.typicode.com/todos).
   • Afficher pour chaque todo :
     • Titre
     • Complété
   • Chaque todo doit être un lien vers sa page dédiée (ex: /todos/1).

2. Créer une page “todo” (/todos/:id) qui affiche les détails d’un todo spécifique :

   • Récupérer les données de la todo depuis l’API Vercel (ex: https://jsonplaceholder.typicode.com/todos/1).
   • Afficher les informations suivantes de l’todo :
     • Titre
     • Complété
     • userId

Utiliser vite pour initialiser le projet avec le template react-ts.