Dans l’App Router, les composants sont Server Components par défaut. Ils peuvent accéder directement aux données côté serveur et n’ajoutent pas leur code au bundle client. Les Client Components sont nécessaires pour état, effets, événements et API du navigateur. La bonne stratégie est généralement serveur par défaut, client aux frontières interactives.
Choisir un Server Component
Utilisez-le pour charger des données, accéder à une base ou un secret, rendre du contenu et réduire le JavaScript envoyé. Une page et ses layouts peuvent rester serveur tout en important de petits îlots interactifs. N’appelez pas votre propre Route Handler depuis un Server Component : appelez directement la couche de données pour éviter un saut réseau inutile.
Choisir un Client Component
Ajoutez la directive use client au fichier qui définit la frontière lorsque vous avez besoin de useState, useEffect, gestionnaires d’événements, contexte client ou API comme localStorage. Un Client Component peut être pré-rendu sur le serveur lors du chargement initial, puis hydraté dans le navigateur.
Composer sans gonfler le bundle
Placez la frontière client aussi bas que possible. Une directive use client entraîne ses imports dans le graphe client ; la mettre sur un grand layout peut envoyer des bibliothèques inutiles. Passez des props sérialisables et, lorsque possible, des éléments serveur comme children plutôt que d’importer toute la page côté client.
Mutations et tests
Utilisez une Server Action ou un Route Handler selon le contrat nécessaire, avec validation et autorisation côté serveur. Pour les composants serveur async, privilégiez aussi des tests d’intégration ou E2E lorsque l’outillage unitaire ne couvre pas correctement le rendu. Surveillez le bundle et les waterfalls.
FAQ
Client Component signifie-t-il rendu uniquement dans le navigateur ?
Non. Il peut participer au HTML initial, puis être hydraté.
Peut-on importer un Server Component dans un Client Component ?
Pas directement comme un module serveur ; composez-le depuis un parent serveur, par exemple via children.
Où placer use client ?
Au sommet du plus petit fichier racine qui nécessite les capacités client.
Composition recommandée
~~~tsx // app/products/page.tsx import { ProductFilters } from './product-filters'
export default async function Page() { const products = await db.product.findMany() return <ProductFilters products={products} /> } ~~~
~~~tsx // app/products/product-filters.tsx 'use client' import { useMemo, useState } from 'react'
export function ProductFilters({ products }: { products: Product[] }) { const [query, setQuery] = useState('') const visible = useMemo( () => products.filter(p => p.name.includes(query)), [products, query], ) return <>{/* champ et liste */}</> } ~~~
Ajoutez use client au fichier qui a réellement besoin d’état, d’événements ou d’API navigateur ; ses imports entrent alors dans le graphe client. Depuis un Server Component, accédez directement à la source serveur au lieu d’appeler une Route Handler interne.