"use client" en Next.js : L'erreur qui tue tes performances

Quand j’ai commencé avec Next.js, j’ai fait l’erreur classique.

Mes boutons ? Morts. 💀
Mes useState ? Erreur rouge. 🔴
Mes onClick ? Disparus. 👻

Ma solution de génie à l’époque :

“Bon… on met "use client" partout et on n’en parle plus.”

Spoiler :
👉 J’utilisais Next.js comme React… mais en mode difficile. 😅

🧠 Le déclic

Next.js n’est pas React++.

C’est React… à l’envers.

React classique :

“Tout s’exécute dans le navigateur. Débrouille-toi.”

Next.js :

“Tout s’exécute sur le serveur…
sauf si tu me demandes explicitement le contraire.”

👉 "use client" n’est pas un bug à corriger.
👉 C’est une permission à demander.

🎮 Les deux mondes de Next.js

🖥️ Server Components (par défaut)

Les super-pouvoirs :

• Accès direct à la base de données 💪
• Sécurité maximale (les secrets restent côté serveur) 🔒
• HTML prêt à l’avance = performances 🔥
• SEO en mode cheat code 📈

Les limites :

• Pas de useState
• Pas de onClick
• Pas de window
• Le serveur ne clique sur rien (logique)

🌐 Client Components ("use client")

Les super-pouvoirs :

• Hooks React ✨
• Boutons interactifs 🖱️
• Animations, modals, carrousels 🎭

Le prix à payer :

• JavaScript envoyé au client 📦
• Plus de responsabilités côté sécurité 🚨
• Performances en baisse si mal utilisé

💣 L’erreur qui détruit les perfs

Ce que font beaucoup de devs au début :

"use client"; // 💥 BOUM

export default function ProductPage() {
  return (
    <>
      <Header />
      <ProductList />
      <Footer />
      <BuyButton /> {/* un seul élément interactif */}
    </>
  );
}

Ce qui vient de se passer :

• ❌ Toute la page devient client-side
• ❌ Header, Footer, ProductList → JavaScript inutile
• ❌ Bundle énorme
• ❌ SEO en PLS

Tout ça… pour un bouton. 🤡

✨ La version intelligente

// Page = Server Component (par défaut)
export default async function ProductPage({ params }) {
  // récupération côté serveur (URL, DB, CMS, etc.)
  const product = await db.getProductBySlug(params.slug);

  return (
    <>
      <Header />
      <ProductList />
      <Footer />
      {/* passage explicite de la donnée au composant client */}
      <BuyButton productId={product.id} />
    </>
  );
}

// BuyButton.tsx
"use client"; // uniquement ici

export default function BuyButton({ productId }) {
  return (
    <button onClick={() => addToCart(productId)}>
      💳 Acheter maintenant
    </button>
  );
}

Résultat :

• 95% de HTML pur 🪶
• 5% de JavaScript utile 🎯
• Performances 📈
• SEO 📈
• Bundle heureux 😌

🎯 Ma règle d’or

“Push use client as far down as possible.”

Pas au niveau :

• ❌ de la page
• ❌ du layout

Mais au niveau exact du composant qui DOIT être interactif.

Boutons, formulaires, modals, carrousels.

Pas pour : pages, headers, listes, textes.

🚩 Red flags

Tu abuses de "use client" si :

• ❌ Chaque fichier commence par "use client"
• ❌ Tu fais des fetch() dans tes Client Components
• ❌ Ton site met 5 secondes à charger
• ❌ Tu te dis : “Next.js c’est compliqué pour rien”

(Spoiler : ce n’est pas Next.js 👀)

💡 Le bon mindset

Avant d’ajouter "use client", pose-toi UNE question :

“Ce composant a-t-il VRAIMENT besoin d’interactivité ?”

• Un titre ? → Server
• Un texte ? → Server
• Une image ? → Server
• Un bouton “Acheter” ? → Client ✅

Simple. Clair. Efficace.

🏆 Le vrai game changer

Next.js te donne un pouvoir rare :

Choisir précisément où ton code s’exécute.

• Serveur → rapide, sécurisé, SEO-friendly
• Client → interactif, vivant

La magie ?
👉 Mixer intelligemment les deux.

La prochaine fois que tu hésites à écrire ("use client"):

Respire.
Réfléchis.
Demande-toi :

“Est-ce vraiment nécessaire côté client ?”

9 fois sur 10 : non.

Et ton bundle.js te dira merci. 🙏

Un prompt simple et efficace pour refactoriser intelligemment ta page

Analyze this Next.js page.

Goal:
- Reduce the usage of "use client"
- Identify components that truly require interactivity
- Convert the rest into Server Components
- Move "use client" as far down the component tree as possible

Constraints:
- Optimize performance
- Reduce the JavaScript bundle size
- Preserve SEO
- Follow Next.js best practices (App Router)

Deliver:
- An optimized component structure
- Components that must remain client-side
- Components that can be server-side