CSR (Client-Side Rendering)

React 🟢 Junior

Definition

Le serveur envoie un HTML vide avec un bundle JS. Le navigateur execute React pour generer le DOM. Mauvais pour le SEO et le premier affichage.

Analogie

Comme recevoir des meubles en kit : le client (navigateur) doit tout assembler lui-meme 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).

Termes lies

#rendering#interview#architecture