CSR (Client-Side Rendering)

React 🟢 Junior

Définition

Le serveur envoie un HTML vide avec un bundle JS. Le navigateur exécuté React pour générer le DOM. Mauvais pour le SEO et le premier affichage.

Analogie

Comme recevoir des meubles en kit : le client (navigateur) doit tout assembler lui-même avant de pouvoir s'asseoir.

Exemple de code

// index.html minimal
// <div id="root"></div>
// <script src="bundle.js"></script>

import { createRoot } from 'react-dom/client';
createRoot(document.getElementById('root')).render(<App />);

Cas d'usage

Dashboards internes, apps behind auth ou le SEO n'est pas critique.

Anti-pattern

Utiliser CSR pour un site public qui a besoin de SEO (blog, e-commerce).
#rendering#interview#architecture

← → au clavier pour passer d'une fiche à l'autre