Optimiser les performances React avec Server Components

Pourquoi les Server Components ?

Les Server Components réduisent le bundle JavaScript envoyé au client. Ils s'exécutent entièrement côté serveur.

Les règles d'or

1. Pas de useState/useEffect dans les Server Components
2. Les données viennent de la base directement
3. Le code côté client reste dans les Client Components

// ✅ Server Component
async function UserProfile({ userId }: { userId: string }) {
  const user = await db.user.findUnique({ where: { id: userId } });
  return <div>{user.name}</div>;
}

// ❌ Ne fonctionne pas
function Counter() {
  const [count, setCount] = useState(0); // Erreur !
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Résultats mesurés

| Métrique | Avant | Après | |----------|-------|-------| | Bundle size | 245 KB | 89 KB | | First Paint | 1.2s | 0.4s | | TTI | 3.1s | 1.1s |

Conclusion

Les Server Components sont un changement de paradigme. Adoptez-les progressivement.