Server vs Client Components

Comprendre le nouveau modèle de rendu de Next.js

Section 1

Le modèle RSC (React Server Components)

Step 1

Server Component par défaut

Dans l'App Router, tous les composants sont Server Components par défaut. Ils s'exécutent sur le serveur, ont accès à la base de données et aux variables d'environnement, et n'envoient pas de JS au client.

app/tutorials/page.tsx

tsx

1// ✅ Server Component — pas de "use client"
2// S'exécute sur le serveur, accès direct à la DB
3import { db } from "@/lib/db";
4
5async function TutorialsPage() {
6  // Requête DB directe — pas de fetch('/api/...')
7  const tutorials = await db.tutorial.findMany({
8    where: { publishedAt: { not: null } },
9    orderBy: { publishedAt: "desc" },
10    include: { category: true },
11  });
12
13  return (
14    <main>
15      <h1>Tutoriels</h1>
16      <ul>
17        {tutorials.map((t) => (
18          <TutorialCard key={t.id} tutorial={t} />
19        ))}
20      </ul>
21    </main>
22  );
23}
24
25export default TutorialsPage;

Step 2

Client Component avec 'use client'

use client est nécessaire pour les composants qui utilisent des hooks React, des event listeners, ou des API browser. Garde les Client Components aussi bas que possible dans l'arbre.

app/tutorials/page.tsx

tsx

1// ✅ Server Component — pas de "use client"
2// S'exécute sur le serveur, accès direct à la DB
3import { db } from "@/lib/db";
4
5async function TutorialsPage() {
6  // Requête DB directe — pas de fetch('/api/...')
7  const tutorials = await db.tutorial.findMany({
8    where: { publishedAt: { not: null } },
9    orderBy: { publishedAt: "desc" },
10    include: { category: true },
11  });
12
13  return (
14    <main>
15      <h1>Tutoriels</h1>
16      <ul>
17        {tutorials.map((t) => (
18          <TutorialCard key={t.id} tutorial={t} />
19        ))}
20      </ul>
21    </main>
22  );
23}
24
25export default TutorialsPage;

Section 2

Routing et layouts

Step 3

Structure de fichiers App Router

L'App Router utilise des conventions de fichiers dans le dossier app/. Chaque dossier correspond à un segment d'URL.

Step 4

Params et SearchParams

Les paramètres dynamiques ([slug]) et les query params (?q=) sont passés en props aux pages. Dans Next.js 15, ils sont des Promises.

app/tutorials/page.tsx

tsx

1// ✅ Server Component — pas de "use client"
2// S'exécute sur le serveur, accès direct à la DB
3import { db } from "@/lib/db";
4
5async function TutorialsPage() {
6  // Requête DB directe — pas de fetch('/api/...')
7  const tutorials = await db.tutorial.findMany({
8    where: { publishedAt: { not: null } },
9    orderBy: { publishedAt: "desc" },
10    include: { category: true },
11  });
12
13  return (
14    <main>
15      <h1>Tutoriels</h1>
16      <ul>
17        {tutorials.map((t) => (
18          <TutorialCard key={t.id} tutorial={t} />
19        ))}
20      </ul>
21    </main>
22  );
23}
24
25export default TutorialsPage;

Topics and skills covered

Next.js
App Router
RSC
Server Components

Server Actions — Mutations sans API

Ch.1