Si vous suivez l'actualité dans le monde de React, vous avez probablement entendu parler de Server Components, une technologie qui suscite de vives discussions au sein de la communauté. Certains l'appellent une révolution dans le développement front-end, d'autres une complication inutile.
Qu'est-ce que Server Components ?
Server Components (composants serveur) — il s'agit d'un nouveau type de composants React qui sont rendus exclusivement sur le serveur et ne sont jamais transmis au navigateur. Cela vous semble étrange ?
Prenons un exemple simple :
// ServerComponent.js (composant serveur)
async function BlogPost({ id }) {
// Ce code est exécuté UNIQUEMENT sur le serveur
const post = await db.posts.findById(id);
return (
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
);
}Veuillez noter que nous accédons directement à la base de données dans le composant ! Auparavant, cela était impossible : il fallait créer des points de terminaison d'API, effectuer des requêtes de récupération, gérer les états de chargement... Maintenant, tout cela peut être fait directement dans le composant.
En quoi les composants de serveur diffèrent-ils des composants ordinaires ?
Comparons les trois types de composants pour comprendre la différence :
1. Client Components (composants clients)
Ce sont les composants React habituels que vous connaissez. Ils :
Exécutées dans le navigateur
Ils peuvent utiliser des crochets (useState, useEffect, etc.)
Peut gérer les événements (onClick, onChange)
Augmenter la taille du paquet JavaScript
'use client'; // Nous indiquons clairement qu'il s'agit d'un composant client
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
);
}2. Server Components (composants du serveur)
Nouveau type de composants qui :
Rendu UNIQUEMENT sur le serveur
Ne tombent pas dans le paquet JavaScript
Ils peuvent travailler directement avec les bases de données et le système de fichiers
NE PEUVENT PAS utiliser les crochets d'état ou les API de navigateur
NE PEUVENT PAS traiter les événements
// Par défaut, dans Next.js 13+, tous les composants sont côté serveur
async function UserProfile({ userId }) {
// L'accès direct à la base de données est le code du serveur !
const user = await db.users.findById(userId);
const posts = await db.posts.findByUser(userId);
return (
<div>
<h2>{user.name}</h2>
<p>{posts.length} постов</p>
</div>
);
}3. Server-Side Rendering (SSR)
Ne confondez pas Server Components avec SSR ! Ce sont des choses différentes :
SSR — rend le code HTML sur le serveur, mais tout le JavaScript est toujours chargé dans le navigateur pour « hydratation »
Server Components — n'envoie pas du tout son JavaScript au navigateur, seulement le résultat final
Pourquoi est-ce nécessaire ?
Problème n° 1 : les paquets JavaScript gonflés
Imaginez : vous affichez une liste de produits avec des descriptions markdown. Auparavant, il fallait inclure une bibliothèque pour l'analyse de markdown dans le paquet client :
// L'ancienne approche : la bibliothèque se retrouve dans le navigateur
import { marked } from 'marked'; // ~50kb
function Product({ description }) {
return <div dangerouslySetInnerHTML={{ __html: marked(description) }} />;
}Avec Server Components, la bibliothèque reste sur le serveur :
// Nouvelle approche : la bibliothèque n'est PAS incluse dans le navigateur
import { marked } from 'marked';
async function Product({ productId }) {
const product = await db.products.findById(productId);
const html = marked(product.description);
return <div dangerouslySetInnerHTML={{ __html: html }} />;
}Résultat : le navigateur reçoit le fichier HTML prêt sans 50 ko de JavaScript supplémentaires !
Problème n° 2 : Cascade de demandes
Problème classique des applications React :
// Mauvais : une cascade de demandes
function Dashboard() {
const { user } = useUser(); // Requête 1
if (!user) return <Loader />;
return <UserPosts userId={user.id} />; // La demande 2 ne commencera qu'après la 1
}Avec Server Components, les requêtes sont exécutées en parallèle sur le serveur :
async function Dashboard() {
// Les deux requêtes seront exécutées en parallèle !
const [user, posts] = await Promise.all([
db.users.getCurrent(),
db.posts.getRecent()
]);
return (
<div>
<UserInfo user={user} />
<PostsList posts={posts} />
</div>
);
}Problème n° 3 : Sécurité
Server Components vous permet de stocker des secrets sur le serveur :
// Sécurisé : la clé API ne sera jamais envoyée au navigateur
async function WeatherWidget({ city }) {
const response = await fetch(
`https://api.weather.com/data?key=${process.env.WEATHER_API_KEY}&city=${city}`
);
const data = await response.json();
return <div>Температура: {data.temp}°C</div>;
}Exemple pratique : plateforme de blog.
Regardons une application réelle qui combine les deux types de composants :
// app/posts/[id]/page.js - composant serveur
async function PostPage({ params }) {
// Les données sont téléchargées sur le serveur
const post = await db.posts.findById(params.id);
const comments = await db.comments.findByPost(params.id);
return (
<article>
<h1>{post.title}</h1>
<PostContent content={post.content} />
{/* Клиентский компонент для интерактивности */}
<CommentForm postId={post.id} />
{/* Серверный компонент для отображения */}
<CommentsList comments={comments} />
</article>
);
}
// components/CommentForm.js - composant client
'use client';
function CommentForm({ postId }) {
const [text, setText] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
await fetch('/api/comments', {
method: 'POST',
body: JSON.stringify({ postId, text })
});
setText('');
};
return (
<form onSubmit={handleSubmit}>
<textarea
value={text}
onChange={(e) => setText(e.target.value)}
/>
<button type="submit">Отправить</button>
</form>
);
}Avantages des composants de serveur
✅ Moins de JavaScript dans le navigateur
Seules les parties interactives de l'application sont chargées dans le navigateur. Tout le reste est sur le serveur.
✅ Accès direct aux ressources du serveur
La base de données, le système de fichiers, les API internes, tout est directement accessible depuis les composants.
✅ Meilleure performance
Les données sont chargées près de la source (serveur → base de données plus rapide que le navigateur → API → base de données).
✅ Séparation automatique du code
Vous n'avez pas besoin de penser au code splitting — les composants du serveur ne sont pas automatiquement inclus dans le bundle.
✅ Sécurité améliorée
Les clés API, les jetons, la logique des processus métier restent sur le serveur.
Faiblesses et difficultés
❌ Courbe d'apprentissage abrupte
Il faut comprendre quel composant est exécuté où. Les débutants sont souvent confus :
// ❌ Erreur : Server Component ne peut pas utiliser useState
async function UserProfile() {
const [isOpen, setIsOpen] = useState(false); // Oups !
// ...
}
// ✅ Correct : nous mettons l'interactivité dans le composant client
async function UserProfile() {
const user = await db.users.getCurrent();
return <ProfileCard user={user} />; // ProfileCard peut être client
}❌ Écosystème limité
Pour le moment, la prise en charge complète n'est disponible que dans Next.js 13+. D'autres cadres commencent tout juste à adopter cette technologie.
❌ Difficultés de débogage
Lorsque une partie du code est exécutée sur le serveur et une autre partie dans le navigateur, le débogage devient plus difficile.
❌ Plus de charge sur le serveur
Chaque requête nécessite un rendu sur le serveur. Il faut penser à la mise en cache et à la mise à l'échelle.
Quand utiliser Server Components ?
Idéal pour :
Pages avec contenu dynamique — blogs, fils d'actualité, catalogues de produits
Tableaux de bord avec beaucoup de données — analyses, rapports, statistiques
Pages critiques pour le référencement — tout le contenu est rendu sur le serveur et est accessible aux moteurs de recherche
Applications avec dépendances lourdes — markdown, surlignage du code, traitement des images
Ne convient pas pour :
Interfaces hautement interactives — éditeurs, jeux, dessins
Applications hors ligne — PWA qui fonctionnent sans serveur
Applications avec mises à jour en temps réel — chats, édition collaborative
Comment commencer à expérimenter ?
La façon la plus simple d'essayer Server Components est de créer un nouveau projet sur Next.js 13+ :
npx create-next-app@latest my-app
cd my-app
npm run devDans Next.js 13+ avec App Router, tous les composants sont côté serveur par défaut. Pour rendre le composant client, ajoutez simplement 'use client' au début du fichier.
Conseils pratiques.
1. Commencez par les composants du serveur
Faites un composant client uniquement lorsque cela est vraiment nécessaire (état, événements, API de navigateur).
2. Utilisez « client boundary »
Divisez l'interactivité en petits composants séparés :
// Composant serveur
async function ProductPage({ id }) {
const product = await db.products.findById(id);
return (
<div>
<h1>{product.name}</h1>
<p>{product.description}</p>
{/* Только кнопка клиентская */}
<AddToCartButton productId={product.id} />
</div>
);
}3. Mettez en cache les données
Next.js met automatiquement en cache les requêtes fetch, mais vous pouvez contrôler cela :
// Mise en cache pendant 1 heure
const data = await fetch('https://api.example.com/data', {
next: { revalidate: 3600 }
});Vaut-il la peine d'apprendre ? Absolument, surtout si vous travaillez avec Next.js ou prévoyez de le faire. Mais rappelez-vous : un bon développeur sait quand utiliser une nouvelle technologie et quand s'en tenir à des solutions éprouvées.
Server Components, les hooks, les performances, l'architecture des applications — tout cela et bien plus encore peut être étudié dans Codique! Nous analysons les sujets en détail, des bases aux concepts avancés, et consolidons les connaissances par des exercices pratiques.
💬 Et si vous avez besoin d'aide ou si vous voulez discuter du code, nous avons déjà plus de 2000 personnes partageant les mêmes idées en mode actif canal Telegram, où ils s'entraident, partagent leurs expériences et discutent des technologies actuelles !
Rejoignez Kodik — apprenez efficacement, pratiquez régulièrement, grandissez professionnellement ! 🎯
Bonne chance pour maîtriser les composants du serveur ! N'oubliez pas que la meilleure façon de comprendre la technologie est de l'essayer dans la pratique. Créez un petit projet et expérimentez ! 💻