Dans l'App Router, vous récupérez les données directement à l'intérieur des composants serveur asynchrones en utilisant l'API fetch standard — pas de getServerSideProps, pas de useEffect, pas de couche de données séparée. Next.js étend fetch avec des contrôles de mise en cache.
// app/posts/page.tsx — a Server Component
export default async function Posts() {
const res = await fetch("https://api.example.com/posts"); // runs on the server
const posts = await res.json();
return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}
Comme le composant s'exécute sur le serveur, vous attendez simplement (await) vos données et les utilisez — beaucoup plus simple que la danse client-side useEffect + useState + état de chargement.
Next.js augmente fetch afin que chaque appel choisisse son comportement de rendu :
fetch(url, { cache: "force-cache" }); // SSG — cached (default for static)
fetch(url, { cache: "no-store" }); // SSR — fresh every request
fetch(url, { next: { revalidate: 60 } }); // ISR — revalidate every 60s
fetch(url, { next: { tags: ["posts"] } }); // tag for on-demand revalidation
C'est le modèle unifié de l'App Router : au lieu de choisir une stratégie au niveau de la page, vous contrôlez la mise en cache au niveau du fetch de données.
// ❌ sequential — each awaits the previous (slow waterfall)
const user = await getUser();
const posts = await getPosts();
// ✅ parallel — both start at once
const [user, posts] = await Promise.all([getUser(), getPosts()]);
Lancez des requêtes indépendantes ensemble avec Promise.all afin qu'elles ne se bloquent pas mutuellement.
"use client";
// for client-side data (e.g. after interaction), use a library like SWR or React Query
const { data } = useSWR("/api/user", fetcher);
Les composants serveur répondent à la plupart des besoins ; utilisez SWR/React Query pour les données côté client, interactives ou fréquemment revalidées.
Next.js dédoublonne automatiquement les appels fetch identiques dans un seul rendu — afin que vous puissiez récupérer les mêmes données dans une mise en page et une page sans double requête.
La récupération directe de données asynchrones dans les composants serveur est l'une des plus grandes simplifications de l'App Router — pas de code passe-partout, accès côté serveur sécurisé, dédoublonnage automatique, et mise en cache par fetch qui double de votre choix SSG/SSR/ISR.
Savoir paralléliser les fetches indépendants (en évitant les goulots d'étranglement) est la pratique de performance clé.