Comment fonctionnent les Server Components dans l'App Router ?

Question

Accepted Answer

**React Server Components (RSC)** s'exécutent **uniquement sur le serveur** — leur JavaScript n'est jamais envoyé au navigateur. Dans l'App Router, chaque composant est un Server Component **par défaut** ; vous optez explicitement pour le comportement client. ## Ce qu'un Server Component peut faire ```tsx // app/users/page.tsx — a Server Component (no "use client") import db from "@/lib/db"; export default async function Users() { const users = await db.user.findMany(); // ✅ direct DB access, runs on server return (

{u.name}

); } ``` Les Server Components peuvent être **async**, `await` des données directement, et accéder à des ressources réservées au serveur (base de données, système de fichiers, secrets) — car ils s'exécutent sur le serveur. Aucune couche API nécessaire pour récupérer les données, et les secrets ne parviennent jamais au client. ## Le grand avantage : zéro JS client pour ce composant Le navigateur reçoit le **HTML/UI rendu**, pas le code du composant ou ses dépendances. Un Server Component qui utilise une lourde bibliothèque de markdown ou de date n'envoie **aucune** partie de cette bibliothèque au navigateur — réduisant drastiquement la taille du bundle. ## Ce que les Server Components NE PEUVENT PAS faire ```tsx // ❌ these only work in Client Components useState, useEffect, useRef // hooks (no interactivity/state on the server) onClick, onChange // event handlers window, localStorage, document // browser-only APIs ``` Pas d'interactivité, d'état, d'effets, ou d'API du navigateur — ceux-ci nécessitent un Client Component. ## Composition des composants serveur et client ```tsx // Server Component fetches data, passes it to an interactive Client Component import LikeButton from "./LikeButton"; // a "use client" component export default async function Post({ id }) { const post = await getPost(id); // server-side fetch return <>

; } ``` Le pattern : les Server Components gèrent les données/la structure ; incrustez les Client Components uniquement où l'interactivité est nécessaire (« îles »). ## Pourquoi c'est important Les Server Components sont la caractéristique déterminante de l'App Router. Ils réduisent la taille du bundle client (moins de JS à télécharger/analyser), permettent un accès aux données côté serveur direct et sécurisé sans API, et améliorent les performances et le SEO. Savoir qu'ils sont le comportement par défaut — et ce qui force un composant à être un Client Component — est fondamental pour structurer efficacement les applications App Router.