Question 1

Quel est le comportement par défaut des Server Components dans Next.js App Router concernant le data fetching ?

Accepted Answer

Les Server Components effectuent le data fetching côté serveur à chaque requête par défaut, ce qui permet d'obtenir des données toujours fraîches. Contrairement aux Pages Router où il fallait utiliser getServerSideProps, les Server Components rendent le SSR implicite. Pour du cache statique, il faut ajouter l'option cache: 'force-cache' au fetch.

Question 2

Quelle option de cache du fetch équivaut à getStaticProps dans le Pages Router ?

Accepted Answer

L'option cache: 'force-cache' indique à Next.js de mettre en cache la réponse jusqu'à invalidation manuelle, ce qui équivaut à getStaticProps. Cette stratégie génère du contenu statique qui reste en cache indéfiniment. L'option 'no-store' équivaut à getServerSideProps (re-fetch à chaque requête), tandis que next.revalidate équivaut à getStaticProps avec revalidate (ISR).

Question 3

Comment forcer le data fetching dynamique à chaque requête (équivalent de getServerSideProps) ?

Accepted Answer

L'option cache: 'no-store' désactive complètement le cache et force le re-fetch à chaque requête, équivalent à getServerSideProps. Cette stratégie garantit des données toujours fraîches mais augmente la latence. Utiliser pour les données temps réel (dashboards, notifications, prix en direct) où la fraîcheur est critique.

Data Fetching Next.js

Quel est le comportement par défaut des Server Components dans Next.js App Router concernant le data fetching ?

Réponse

Quelle option de cache du fetch équivaut à getStaticProps dans le Pages Router ?

Réponse

Comment forcer le data fetching dynamique à chaque requête (équivalent de getServerSideProps) ?

Réponse

Comment mettre en place l'ISR (Incremental Static Regeneration) avec une revalidation toutes les heures ?

Que fait l'export 'export const revalidate = 60' au niveau d'une page ?

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

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

React Server Components

Internationalisation Next.js

Sécurité & Best Practices React

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