Question 1

Qu'est-ce qu'un React Server Component ?

Accepted Answer

Les Server Components sont des composants React qui s'exécutent uniquement sur le serveur et ne sont jamais envoyés au client. Contrairement aux composants traditionnels, ils n'ont pas besoin d'être hydratés côté client, ce qui réduit considérablement la taille du bundle JavaScript. Ils permettent d'accéder directement aux ressources backend (bases de données, systèmes de fichiers) sans exposer les secrets ou clés API.

Question 2

Comment déclarer un Client Component dans React ?

Accepted Answer

La directive 'use client' placée en haut d'un fichier indique que le composant et tous ses enfants importés sont des Client Components. Cette directive marque la frontière entre le code serveur et client. Sans cette directive, les composants sont des Server Components par défaut dans les frameworks qui supportent les RSC comme Next.js App Router.

Question 3

Quelle est la principale différence entre Server et Client Components ?

Accepted Answer

Les Server Components s'exécutent sur le serveur et leur code n'est jamais envoyé au client, tandis que les Client Components sont envoyés au navigateur et nécessitent JavaScript pour l'interactivité. Cette distinction fondamentale affecte l'accès aux ressources, la taille du bundle, et les capacités d'interactivité. Les Server Components ne peuvent pas utiliser les hooks React ou gérer des événements utilisateur.

React Server Components

Qu'est-ce qu'un React Server Component ?

Réponse

Comment déclarer un Client Component dans React ?

Réponse

Quelle est la principale différence entre Server et Client Components ?

Réponse

Quel hook React peut être utilisé dans un Server Component ?

Comment faire du data fetching dans un Server Component ?

Autres sujets d'entretien React / Next.js

Les bases de JavaScript

Fondamentaux React

React Hooks

Cycle de vie des composants

React Router

Gestion d'état avec Context

Formulaires & Composants contrôlés

Fetching de données & API

React Query (TanStack Query)

Styling & CSS-in-JS

Fondamentaux Next.js

TypeScript avec React

Data Fetching Next.js

Server Actions Next.js

Routing & Navigation Next.js

API Routes Next.js

Metadata & SEO Next.js

Middleware & Auth Next.js

Testing React

Zustand State Management

Optimisation Performance React

Error Boundaries & Error Handling

Advanced React Patterns

Fonctionnalités avancées Next.js

Déploiement & Production Next.js

Architecture & Design Patterns

Internationalisation Next.js

Sécurité & Best Practices React

Maîtrise React / Next.js pour ton prochain entretien