1~
2Les React Server Components (RSC) ont fondamentalement changé la façon dont nous construisons des applications React. En déplaçant la logique de rendu vers le serveur, nous pouvons réduire considérablement le bundle JavaScript envoyé au client, ce qui se traduit par des temps de chargement plus rapides et une meilleure expérience utilisateur. Dans cet article, nous explorerons les modèles avancés et les meilleures pratiques pour tirer parti des RSC en 2026.
3~
4## Que sont les Server Components ?
5~
6Traditionnellement, les composants React étaient rendus entièrement sur le client (CSR) ou pré-rendus sur le serveur sous forme de HTML (SSR) puis hydratés sur le client. Les **Server Components** nous permettent de rendre des composants _exclusivement_ sur le serveur. Leur code n'est jamais envoyé au navigateur.
7~
8### Les Avantages
9~
101.  **Taille de Bundle Nulle** : Les dépendances utilisées dans les Server Components (comme les analyseurs de markdown ou les bibliothèques de dates lourdes) restent sur le serveur.
112.  **Accès Direct au Backend** : Vous pouvez interroger votre base de données directement dans votre composant sans exposer de points de terminaison d'API.
123.  **Code Splitting Automatique** : Les composants clients importés côté serveur sont automatiquement divisés en code.
13~
14## Modèle de Récupération de Données
15~
16Avec les RSC, vous pouvez rendre vos composants `async` et attendre les données directement.
17~
18```tsx
19// app/users/page.tsx
20import { db } from '@/lib/db';
21~
22export default async function UsersPage() {
23  const users = await db.user.findMany();
24~
25  return (
26    <main>
27      <h1>Utilisateurs</h1>
28      <ul>
29        {users.map((user) => (
30          <li key={user.id}>{user.name}</li>
31        ))}
32      </ul>
33    </main>
34  );
35}
36```
37~
38### Suspense pour le Streaming
39~
40Étant donné que la récupération des données peut être lente, enveloppez vos composants dans `<Suspense>` pour afficher une interface utilisateur de secours immédiatement pendant le chargement des données.
41~
42```tsx
43import { Suspense } from 'react';
44import UserList from './UserList';
45import LoadingSkeleton from './LoadingSkeleton';
46~
47export default function Page() {
48  return (
49    <section>
50      <h1>Mes Utilisateurs</h1>
51      <Suspense fallback={<LoadingSkeleton />}>
52        <UserList />
53      </Suspense>
54    </section>
55  );
56}
57```
58~
59## Combiner les Server et Client Components
60~
61L'un des aspects les plus déroutants est de savoir comment combiner les composants serveur et client.
62~
63**Règle d'or** : Les Server Components peuvent importer des Client Components. Les Client Components _ne peuvent pas_ importer directement des Server Components. Cependant, vous pouvez passer un Server Component comme `children` à un Client Component.
64~
65### Le Modèle "Children"
66~
67```tsx
68// ClientComponent.tsx
69'use client';
70~
71import { useState } from 'react';
72~
73export default function ClientWrapper({ children }) {
74  const [count, setCount] = useState(0);
75~
76  return (
77    <div onClick={() => setCount((c) => c + 1)}>
78      Compteur : {count}
79      {children} {/* Cela peut être un Server Component ! */}
80    </div>
81  );
82}
83```
84~
85```tsx
86// ServerPage.tsx
87import ClientWrapper from './ClientWrapper';
88import ServerContent from './ServerContent';
89~
90export default function Page() {
91  return (
92    <ClientWrapper>
93      <ServerContent /> {/* Cela fonctionne parfaitement */}
94    </ClientWrapper>
95  );
96}
97```
98~
99## Pièges Courants
100~
1011.  **Utilisation du Context dans les Server Components** : Le Context est un concept côté client. Si vous devez partager des données côté serveur, passez-les en tant que props ou utilisez un cache spécialisé à la portée de la requête.
1022.  **Ajout de Gestionnaires d'Événements** : Vous ne pouvez pas ajouter `onClick` ou `onChange` à un Server Component. Cette logique appartient à un nœud feuille générique Client Component.
103~
104## Conclusion
105~
106Les React Server Components ne sont pas seulement une fonctionnalité ; c'est un changement de paradigme. En comprenant la frontière entre le serveur et le client, vous pouvez créer des applications à la fois hautement interactives et incroyablement rapides.
107~