Next.js Server Components : comprendre le rendu serveur et client

Avec l'App Router, les Next.js Server Components deviennent une partie centrale de l'architecture d'une application React. Pourtant, le concept peut sembler déroutant lorsqu'on vient d'un projet React classique où les composants sont généralement exécutés dans le navigateur.

Dans Next.js, un composant n'est plus nécessairement destiné au client. Avec l'App Router, les composants sont des Server Components par défaut. Les composants qui nécessitent une interaction avec le navigateur peuvent ensuite être explicitement déclarés comme Client Components.

Cette différence change la manière de réfléchir à une application.

La question n'est plus simplement :

« Comment afficher cette interface avec React ? »

Il faut également se demander :

« Où ce composant doit-il être exécuté ? »

Comprendre cette distinction permet de mieux structurer une application Next.js, de limiter le JavaScript envoyé au navigateur et de séparer plus clairement les responsabilités entre serveur et client.

Que sont les Next.js Server Components ?

Les Next.js Server Components sont des composants React exécutés côté serveur dans l'architecture App Router.

Ils peuvent générer l'interface à partir de données disponibles côté serveur avant que certaines parties interactives ne soient prises en charge par le navigateur.

Un composant simple peut ainsi être écrit :

export default async function ProductsPage() {
  const products = await getProducts()

  return (
    <main>
      <h1>Produits</h1>

      {products.map((product) => (
        <article key={product.id}>
          <h2>{product.name}</h2>
        </article>
      ))}
    </main>
  )
}