Server vs Client Components

La distinction fondamentale de l'App Router

Par défaut dans l'App Router, tous les composants sont Server Components. Ils s'exécutent uniquement sur le serveur, peuvent faire des appels DB directs, et n'envoient aucun JavaScript au client. Ajouter 'use client' bascule un composant côté client.

app/tutorials/page.tsx

typescript

1// Server Component (défaut) — accès direct à la DB
2export default async function TutorialsPage() {
3  // Pas de useEffect, pas de fetch() — appel direct
4  const tutorials = await tutorialService.findAll();
5
6  return (
7    <div>
8      {tutorials.map(t => (
9        // TutorialCard peut être un Client Component
10        <TutorialCard key={t.id} tutorial={t} />
11      ))}
12    </div>
13  );
14}

Règle simple

Commence toujours en Server Component. Ajoute 'use client' seulement si tu as besoin de : useState, useEffect, event handlers, ou APIs navigateur.

Topics and skills covered

React
Next.js
RSC