Server vs Client Components

4.1Par défaut : Server Component

Bonne nouvelle : dans Next.js, tous les composants sont des Server Components par défaut. Ça veut dire qu'ils s'exécutent sur le serveur, pas dans le navigateur.

Les avantages :

• Zéro JavaScript envoyé au navigateur pour ces composants. Page plus légère.
• Tu peux accéder directement à ta base de données, tes fichiers, tes APIs privées.
• Le SEO est parfait : Google voit le HTML déjà rendu.
• Les données sensibles (clés API, mots de passe) restent côté serveur.

// Ceci est un Server Component (par défaut !)
// Pas de 'use client', donc il tourne sur le serveur

export default function ArticlePage() {
  // Tu pourrais même faire un appel BDD ici directement
  return (
    <article>
      <h1>Mon article</h1>
      <p>Ce HTML est généré sur le serveur et envoyé tout prêt.</p>
    </article>
  )
}

4.2Passer en Client Component

Quand tu as besoin d'interactivité (un bouton cliquable, un formulaire, un état qui change), tu dois dire à Next.js : "Ce composant, je veux qu'il vive dans le navigateur." Pour ça, tu ajoutes 'use client' en haut du fichier :

'use client'

import { useState } from 'react'

export default function LikeButton() {
  const [likes, setLikes] = useState(0)

  return (
    <button onClick={() => setLikes(likes + 1)}>
      ❤️ {likes} likes
    </button>
  )
}

Dès que tu ajoutes 'use client', ce composant et tous ses enfants deviennent des Client Components. Ils s'exécutent dans le navigateur, comme un composant React classique.

4.3Quand utiliser quoi ?

4.4La bonne pratique : pousser le 'use client' le plus bas possible

L'erreur de débutant, c'est de mettre 'use client' en haut de la page entière. Mais ça envoie tout le JavaScript au navigateur. On perd l'intérêt des Server Components.

La bonne stratégie : garde ta page en Server Component et isole les parties interactives dans de petits Client Components :

// app/blog/[slug]/page.tsx (Server Component)

import LikeButton from '@/components/like-button'

export default async function ArticlePage({ params }) {
  const { slug } = await params
  // Ici on récupère les données côté serveur
  const article = await getArticle(slug)

  return (
    <article>
      <h1>{article.title}</h1>
      <p>{article.content}</p>

      {/* Seul ce petit composant est un Client Component */}
      <LikeButton articleId={article.id} />
    </article>
  )
}

// components/like-button.tsx (Client Component)
'use client'

import { useState } from 'react'

export default function LikeButton({ articleId }: { articleId: string }) {
  const [liked, setLiked] = useState(false)

  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? '❤️ Aimé' : '🤍 Aimer'}
    </button>
  )
}

4.5Les erreurs que tu vas forcément rencontrer

Pas de panique, tout le monde passe par là. Voici les classiques :