Aller au contenu principal
Krealabs
Lexique
Lexique · Définition
Web

React Server Components (RSC)

Aussi appelé : « RSC », « Server Components »

Composants React qui s'exécutent côté serveur et envoient au navigateur uniquement leur résultat HTML, sans JavaScript. Réduisent drastiquement la taille du bundle JS et améliorent les Core Web Vitals.

01Définition détaillée
Les React Server Components (RSC) sont une innovation React majeure introduite stable dans React 19 (2024) et largement adoptée via Next.js App Router. Contrairement aux composants React classiques (qui s'exécutent dans le navigateur), un RSC s'exécute uniquement côté serveur : son JavaScript ne traverse jamais le réseau. Le client reçoit uniquement le HTML final + un payload léger pour les Client Components imbriqués. Résultat : bundles JS divisés par 2 à 10, Time-to-Interactive amélioré, possibilité d'utiliser des dépendances Node-only (database, fs, secret keys) directement dans le composant.
02Pourquoi c'est important

Les RSC changent la donne pour les sites haute performance : on retrouve la légèreté d'un site statique classique tout en gardant la DX de React. Pour un site avec beaucoup de pages éditoriales et peu d'interactivité, le bundle JS peut tomber sous 50KB (vs 200-500KB pour un SPA React classique). Impact direct sur LCP, INP, et Lighthouse.

03Notre approche chez Krealabs

Chez Krealabs, nous adoptons les RSC par défaut sur tous les nouveaux projets Next.js depuis 2024. Règle simple : tout est Server Component sauf si on a explicitement besoin de useState, useEffect, ou d'un event handler — alors on isole en Client Component (`"use client"`). Résultat : Lighthouse 95+ accessible sans optimisation manuelle.

→ Article : React 19 Server Components en pratique
04Termes liés

Continuer dans le lexique.

Web

Next.js

Framework React de référence pour la production : rendu côté serveur (SSR), génération statique (SSG), App Router, Serve…

Lire la définition
SEO

Core Web Vitals

Trois métriques de performance web mesurées par Google qui notent la qualité d'expérience utilisateur : LCP (Largest Con…

Lire la définition
Passons à l'action

Discuter de votre projet ?

Si ce terme fait écho à un projet ou une question concrète, on peut en discuter. Premier échange offert.

Prendre rendez-vousVoir tous les services