Les Server Components représentent l'évolution la plus significative de React depuis les Hooks. Avec React 19, cette architecture devient mature et prête pour la production, permettant d'exécuter des composants directement sur le serveur tout en conservant l'interactivité côté client.

Prérequis

Ce guide suppose une connaissance de React et de Next.js App Router. Les exemples utilisent Next.js 14+ qui implémente nativement les React Server Components.

Comprendre l'architecture Server Components

Les Server Components (RSC) introduisent un nouveau paradigme : certains composants s'exécutent exclusivement sur le serveur, d'autres sur le client, et les deux peuvent coexister dans la même arborescence. Cette séparation permet d'optimiser les performances en réduisant drastiquement le JavaScript envoyé au navigateur.

L'idée fondamentale repose sur le fait que de nombreux composants n'ont pas besoin d'interactivité. Un composant qui affiche une liste d'articles depuis une base de données, par exemple, peut entièrement s'exécuter côté serveur. Seuls les éléments interactifs (boutons, formulaires, animations) nécessitent du JavaScript client.

app/articles/page.tsxtsx

// Ce composant s'exécute uniquement sur le serveur
// Aucun JavaScript n'est envoyé au client pour ce composant
import { getArticles } from '@/lib/articles'
import ArticleCard from './ArticleCard'
import LikeButton from './LikeButton'

// async/await directement dans le composant
// Possible uniquement avec les Server Components
export default async function ArticlesPage() {
  // Appel base de données direct (pas d'API REST nécessaire)
  const articles = await getArticles()

  return (
    <main className="container mx-auto py-8">
      <h1 className="text-3xl font-bold mb-6">Articles récents</h1>

      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {articles.map((article) => (
          // ArticleCard est aussi un Server Component
          <ArticleCard key={article.id} article={article}>
            {/* LikeButton est un Client Component (interactif) */}
            <LikeButton articleId={article.id} />
          </ArticleCard>
        ))}
      </div>
    </main>
  )
}

La directive "use client" marque explicitement les composants qui nécessitent le JavaScript du navigateur.

app/articles/LikeButton.tsxtsx

'use client'

// useState et les hooks interactifs nécessitent "use client"
import { useState, useTransition } from 'react'
import { likeArticle } from '@/actions/articles'

interface LikeButtonProps {
  articleId: string
  initialLikes?: number
}

export default function LikeButton({ articleId, initialLikes = 0 }: LikeButtonProps) {
  // État local pour l'UI optimiste
  const [likes, setLikes] = useState(initialLikes)
  const [isPending, startTransition] = useTransition()

  const handleLike = () => {
    // Mise à jour optimiste immédiate
    setLikes((prev) => prev + 1)

    // Server Action pour persister
    startTransition(async () => {
      await likeArticle(articleId)
    })
  }

  return (
    <button
      onClick={handleLike}
      disabled={isPending}
      className="flex items-center gap-2 px-3 py-1 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors"
    >
      <span>❤️</span>
      <span>{likes}</span>
    </button>
  )
}

Cette architecture réduit considérablement le bundle JavaScript : seul le code de LikeButton est envoyé au client, pas celui de ArticlesPage ni de ArticleCard.

Patterns de composition Server/Client

La composition entre Server et Client Components suit des règles précises. Un Server Component peut importer et rendre des Client Components, mais l'inverse n'est pas possible directement. Pour passer du contenu serveur à un composant client, le pattern children est la solution.

components/InteractiveWrapper.tsxtsx

'use client'

import { useState, ReactNode } from 'react'

interface InteractiveWrapperProps {
  children: ReactNode
  expandable?: boolean
}

// Client Component qui encapsule du contenu serveur
export function InteractiveWrapper({ children, expandable = false }: InteractiveWrapperProps) {
  const [isExpanded, setIsExpanded] = useState(!expandable)

  if (!expandable) {
    return <div>{children}</div>
  }

  return (
    <div className="border rounded-lg overflow-hidden">
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className="w-full p-4 text-left font-medium bg-gray-50 hover:bg-gray-100"
      >
        {isExpanded ? '▼ Réduire' : '▶ Développer'}
      </button>

      {isExpanded && (
        <div className="p-4">
          {/* children peut contenir des Server Components */}
          {children}
        </div>
      )}
    </div>
  )
}

app/dashboard/page.tsxtsx

// Server Component qui utilise le wrapper client
import { InteractiveWrapper } from '@/components/InteractiveWrapper'
import { getStats, getRecentActivity } from '@/lib/dashboard'

export default async function DashboardPage() {
  // Requêtes parallèles côté serveur
  const [stats, activity] = await Promise.all([
    getStats(),
    getRecentActivity()
  ])

  return (
    <div className="space-y-6">
      {/* Stats dans un wrapper expansible */}
      <InteractiveWrapper expandable>
        {/* Ce contenu est rendu côté serveur puis passé au client */}
        <div className="grid grid-cols-3 gap-4">
          <StatCard title="Utilisateurs" value={stats.users} />
          <StatCard title="Revenus" value={stats.revenue} />
          <StatCard title="Commandes" value={stats.orders} />
        </div>
      </InteractiveWrapper>

      {/* Activité récente */}
      <InteractiveWrapper>
        <ActivityList activities={activity} />
      </InteractiveWrapper>
    </div>
  )
}

Ce pattern permet de combiner l'interactivité client avec des données rendues côté serveur sans dupliquer la logique.

Data fetching et mise en cache

Fetch étendu par React

React 19 étend automatiquement l'API fetch native pour ajouter la déduplication et la mise en cache. Les requêtes identiques dans le même rendu ne sont exécutées qu'une seule fois.

La récupération de données dans les Server Components se fait directement avec async/await. React gère automatiquement la déduplication des requêtes identiques.

lib/api.tstsx

// Configuration centralisée des requêtes avec cache
const API_BASE = process.env.API_URL

// Requête avec revalidation temporelle
export async function getProducts() {
  const response = await fetch(`${API_BASE}/products`, {
    // Revalider toutes les heures
    next: { revalidate: 3600 }
  })

  if (!response.ok) {
    throw new Error('Failed to fetch products')
  }

  return response.json()
}

// Requête sans cache (données en temps réel)
export async function getCurrentUser() {
  const response = await fetch(`${API_BASE}/me`, {
    // Pas de cache, toujours frais
    cache: 'no-store'
  })

  if (!response.ok) {
    return null
  }

  return response.json()
}

// Requête avec tag pour invalidation ciblée
export async function getProduct(id: string) {
  const response = await fetch(`${API_BASE}/products/${id}`, {
    next: {
      tags: [`product-${id}`],
      revalidate: 3600
    }
  })

  if (!response.ok) {
    throw new Error('Product not found')
  }

  return response.json()
}

Pour les accès base de données directs (Prisma, Drizzle), le cache React avec unstable_cache offre les mêmes capacités.

lib/db-queries.tstsx

import { unstable_cache } from 'next/cache'
import { prisma } from '@/lib/prisma'

// Cache des catégories (rarement modifiées)
export const getCategories = unstable_cache(
  async () => {
    return prisma.category.findMany({
      orderBy: { name: 'asc' }
    })
  },
  ['categories'], // Clé de cache
  {
    revalidate: 86400, // 24 heures
    tags: ['categories']
  }
)

// Cache des produits par catégorie
export const getProductsByCategory = unstable_cache(
  async (categoryId: string) => {
    return prisma.product.findMany({
      where: { categoryId },
      include: { images: true },
      orderBy: { createdAt: 'desc' }
    })
  },
  ['products-by-category'],
  {
    revalidate: 3600,
    tags: ['products']
  }
)

// Invalidation du cache après mutation
export async function createProduct(data: ProductInput) {
  const product = await prisma.product.create({ data })

  // Invalider les caches concernés
  revalidateTag('products')

  return product
}

Prêt à réussir tes entretiens React / Next.js ?

Entraîne-toi avec nos simulateurs interactifs, fiches express et tests techniques.

Explorer React / Next.js

Streaming et Suspense pour une UX optimale

Le streaming permet d'envoyer progressivement le HTML au navigateur, affichant immédiatement les parties disponibles pendant que d'autres se chargent. Combiné à Suspense, ce mécanisme améliore drastiquement le Time to First Byte (TTFB) et l'expérience utilisateur perçue.

app/product/[id]/page.tsxtsx

import { Suspense } from 'react'
import { getProduct } from '@/lib/products'
import ProductDetails from './ProductDetails'
import ProductReviews from './ProductReviews'
import RecommendedProducts from './RecommendedProducts'
import { Skeleton } from '@/components/ui/Skeleton'

interface ProductPageProps {
  params: { id: string }
}

export default async function ProductPage({ params }: ProductPageProps) {
  // Cette requête bloque le rendu initial
  const product = await getProduct(params.id)

  return (
    <div className="container mx-auto py-8">
      {/* Rendu immédiat avec les données produit */}
      <ProductDetails product={product} />

      {/* Les reviews se chargent en streaming */}
      <section className="mt-12">
        <h2 className="text-2xl font-bold mb-6">Avis clients</h2>
        <Suspense fallback={<ReviewsSkeleton />}>
          {/* Ce composant async sera streamé */}
          <ProductReviews productId={params.id} />
        </Suspense>
      </section>

      {/* Les recommandations aussi */}
      <section className="mt-12">
        <h2 className="text-2xl font-bold mb-6">Produits similaires</h2>
        <Suspense fallback={<ProductGridSkeleton count={4} />}>
          <RecommendedProducts productId={params.id} />
        </Suspense>
      </section>
    </div>
  )
}

// Skeleton pour les reviews
function ReviewsSkeleton() {
  return (
    <div className="space-y-4">
      {[1, 2, 3].map((i) => (
        <div key={i} className="border rounded-lg p-4">
          <Skeleton className="h-4 w-32 mb-2" />
          <Skeleton className="h-4 w-full" />
          <Skeleton className="h-4 w-3/4" />
        </div>
      ))}
    </div>
  )
}

app/product/[id]/ProductReviews.tsxtsx

// Server Component async qui sera streamé
import { getProductReviews } from '@/lib/reviews'

interface ProductReviewsProps {
  productId: string
}

export default async function ProductReviews({ productId }: ProductReviewsProps) {
  // Cette requête peut prendre du temps
  // Le composant sera streamé quand elle sera terminée
  const reviews = await getProductReviews(productId)

  if (reviews.length === 0) {
    return (
      <p className="text-gray-500 italic">
        Aucun avis pour le moment. Soyez le premier à donner votre avis !
      </p>
    )
  }

  return (
    <div className="space-y-4">
      {reviews.map((review) => (
        <article key={review.id} className="border rounded-lg p-4">
          <div className="flex items-center gap-2 mb-2">
            <span className="font-medium">{review.author}</span>
            <span className="text-yellow-500">
              {'★'.repeat(review.rating)}{'☆'.repeat(5 - review.rating)}
            </span>
          </div>
          <p className="text-gray-700">{review.content}</p>
          <time className="text-sm text-gray-500">
            {new Date(review.createdAt).toLocaleDateString('fr-FR')}
          </time>
        </article>
      ))}
    </div>
  )
}

Le navigateur reçoit d'abord le shell HTML avec les skeletons, puis le contenu réel est injecté au fur et à mesure via streaming.

Server Actions pour les mutations

Les Server Actions permettent d'exécuter du code serveur depuis les composants client sans créer d'API routes. Cette approche simplifie considérablement la gestion des mutations.

actions/cart.tstsx

'use server'

import { revalidatePath } from 'next/cache'
import { cookies } from 'next/headers'
import { prisma } from '@/lib/prisma'
import { getCurrentUser } from '@/lib/auth'

// Action pour ajouter au panier
export async function addToCart(productId: string, quantity: number = 1) {
  const user = await getCurrentUser()

  if (!user) {
    // Retourner une erreur structurée
    return { error: 'Connexion requise', code: 'UNAUTHORIZED' }
  }

  try {
    // Vérifier le stock
    const product = await prisma.product.findUnique({
      where: { id: productId }
    })

    if (!product || product.stock < quantity) {
      return { error: 'Stock insuffisant', code: 'OUT_OF_STOCK' }
    }

    // Ajouter ou mettre à jour l'item du panier
    await prisma.cartItem.upsert({
      where: {
        cartId_productId: {
          cartId: user.cartId,
          productId
        }
      },
      update: {
        quantity: { increment: quantity }
      },
      create: {
        cartId: user.cartId,
        productId,
        quantity
      }
    })

    // Invalider le cache de la page panier
    revalidatePath('/cart')

    return { success: true, message: 'Produit ajouté au panier' }
  } catch (error) {
    console.error('Add to cart error:', error)
    return { error: 'Une erreur est survenue', code: 'SERVER_ERROR' }
  }
}

// Action pour supprimer du panier
export async function removeFromCart(itemId: string) {
  const user = await getCurrentUser()

  if (!user) {
    return { error: 'Connexion requise' }
  }

  await prisma.cartItem.delete({
    where: { id: itemId, cart: { userId: user.id } }
  })

  revalidatePath('/cart')

  return { success: true }
}

components/AddToCartButton.tsxtsx

'use client'

import { useTransition } from 'react'
import { addToCart } from '@/actions/cart'
import { toast } from '@/components/ui/toast'

interface AddToCartButtonProps {
  productId: string
}

export function AddToCartButton({ productId }: AddToCartButtonProps) {
  const [isPending, startTransition] = useTransition()

  const handleClick = () => {
    startTransition(async () => {
      const result = await addToCart(productId)

      if (result.error) {
        toast.error(result.error)
        return
      }

      toast.success(result.message)
    })
  }

  return (
    <button
      onClick={handleClick}
      disabled={isPending}
      className="w-full py-3 px-6 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
    >
      {isPending ? (
        <span className="flex items-center justify-center gap-2">
          <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
          Ajout en cours...
        </span>
      ) : (
        'Ajouter au panier'
      )}
    </button>
  )
}

Validation côté serveur

Toujours valider les données dans les Server Actions. Les validations côté client peuvent être contournées. Utiliser Zod ou une bibliothèque similaire pour une validation robuste.

Gestion des erreurs et Error Boundaries

React 19 améliore la gestion des erreurs avec les Server Components. Les Error Boundaries fonctionnent de la même manière qu'avec les Client Components.

app/products/error.tsxtsx

'use client'

// Error Boundary pour le segment /products
interface ErrorProps {
  error: Error & { digest?: string }
  reset: () => void
}

export default function ProductsError({ error, reset }: ErrorProps) {
  return (
    <div className="flex flex-col items-center justify-center min-h-[400px] text-center">
      <div className="p-6 bg-red-50 rounded-lg max-w-md">
        <h2 className="text-xl font-bold text-red-800 mb-2">
          Erreur de chargement
        </h2>
        <p className="text-red-600 mb-4">
          Impossible de charger les produits. Veuillez réessayer.
        </p>
        {/* Afficher le digest pour le debugging */}
        {error.digest && (
          <p className="text-sm text-gray-500 mb-4">
            Référence : {error.digest}
          </p>
        )}
        <button
          onClick={reset}
          className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
        >
          Réessayer
        </button>
      </div>
    </div>
  )
}

app/products/loading.tsxtsx

// Loading UI pendant le chargement initial
export default function ProductsLoading() {
  return (
    <div className="container mx-auto py-8">
      <div className="h-8 w-48 bg-gray-200 rounded animate-pulse mb-6" />
      <div className="grid grid-cols-3 gap-6">
        {[1, 2, 3, 4, 5, 6].map((i) => (
          <div key={i} className="border rounded-lg p-4">
            <div className="aspect-square bg-gray-200 rounded animate-pulse mb-4" />
            <div className="h-4 bg-gray-200 rounded animate-pulse mb-2" />
            <div className="h-4 w-2/3 bg-gray-200 rounded animate-pulse" />
          </div>
        ))}
      </div>
    </div>
  )
}

Pour une gestion plus fine des erreurs dans les composants spécifiques, le composant ErrorBoundary peut être utilisé directement.

components/ErrorBoundary.tsxtsx

'use client'

import { Component, ReactNode } from 'react'

interface Props {
  children: ReactNode
  fallback?: ReactNode
}

interface State {
  hasError: boolean
  error?: Error
}

export class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = { hasError: false }
  }

  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error }
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    // Logger l'erreur vers un service de monitoring
    console.error('ErrorBoundary caught:', error, errorInfo)
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || (
        <div className="p-4 bg-red-50 rounded-lg">
          <p className="text-red-600">Une erreur est survenue</p>
        </div>
      )
    }

    return this.props.children
  }
}

Optimisations de performance en production

Plusieurs techniques permettent d'optimiser les performances des Server Components en production.

app/layout.tsxtsx

import { Suspense } from 'react'
import { headers } from 'next/headers'

// Précharger les données critiques
export const dynamic = 'force-dynamic'

export default async function RootLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="fr">
      <body>
        {/* Header streamé indépendamment */}
        <Suspense fallback={<HeaderSkeleton />}>
          <Header />
        </Suspense>

        <main>{children}</main>

        {/* Footer peut être statique */}
        <Footer />
      </body>
    </html>
  )
}

lib/prefetch.tstsx

// Préchargement des données pour les liens
import { preload } from 'react-dom'

export function prefetchProduct(productId: string) {
  // Précharger les images
  preload(`/api/products/${productId}/image`, { as: 'image' })
}

// Utilisation dans un composant
// <Link href={`/products/${id}`} onMouseEnter={() => prefetchProduct(id)}>

next.config.jstsx

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Optimisations de build
  experimental: {
    // Activer le Partial Prerendering (PPR)
    ppr: true,
    // Optimiser les imports de packages
    optimizePackageImports: ['lucide-react', '@radix-ui/react-icons']
  },

  // Configuration des images
  images: {
    formats: ['image/avif', 'image/webp'],
    remotePatterns: [
      { hostname: 'cdn.example.com' }
    ]
  }
}

module.exports = nextConfig

Prêt à réussir tes entretiens React / Next.js ?

Entraîne-toi avec nos simulateurs interactifs, fiches express et tests techniques.

Explorer React / Next.js

Conclusion

Les Server Components de React 19 transforment fondamentalement la façon de construire des applications React. Les points essentiels à retenir :

✅ Séparation serveur/client : utiliser "use client" uniquement pour les composants interactifs
✅ Data fetching direct : async/await dans les composants, sans useEffect ni API routes
✅ Streaming avec Suspense : affichage progressif pour une meilleure UX perçue
✅ Server Actions : mutations simplifiées sans créer d'endpoints API
✅ Cache intelligent : revalidate et tags pour optimiser les performances
✅ Composition flexible : pattern children pour mixer Server et Client Components

Cette architecture permet de créer des applications plus performantes avec moins de JavaScript côté client, tout en simplifiant considérablement le code. La transition vers les Server Components représente un investissement qui se rentabilise rapidement en termes de performance et de maintenabilité.

Passe à la pratique !

Teste tes connaissances avec nos simulateurs d'entretien et tests techniques.

Créer mon compte gratuit

React 19 : Server Components en production, le guide complet

Comprendre l'architecture Server Components

Patterns de composition Server/Client

Data fetching et mise en cache

Prêt à réussir tes entretiens React / Next.js ?

Streaming et Suspense pour une UX optimale

Server Actions pour les mutations

Gestion des erreurs et Error Boundaries

Optimisations de performance en production

Prêt à réussir tes entretiens React / Next.js ?

Conclusion

Passe à la pratique !

Articles similaires

React Compiler en 2026 : mémoïsation automatique et questions d'entretien

React Server Components en production : patterns et pièges à éviter

React Hooks avancés : Patterns et optimisations