In de App Router haalt u gegevens direct op in async Server Components met behulp van de standaard fetch API — geen getServerSideProps, geen useEffect, geen apart data layer. Next.js breidt fetch uit met caching-besturingselementen.
// 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>;
}
Omdat de component op de server wordt uitgevoerd, wacht u eenvoudig op uw gegevens en gebruikt u deze — veel eenvoudiger dan de client-side useEffect + useState + loading-state dans.
Next.js voegt fetch uit zodat elke aanroep zijn rendergedrag kiest:
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
Dit is het uniforme model van de App Router: in plaats van een strategie op paginaniveau te kiezen, beheert u caching op het gegevensverhaal-niveau.
// ❌ 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()]);
Start onafhankelijke verzoeken samen met Promise.all zodat ze elkaar niet blokkeren.
"use client";
// for client-side data (e.g. after interaction), use a library like SWR or React Query
const { data } = useSWR("/api/user", fetcher);
Server Components dekken de meeste behoeften af; gebruik SWR/React Query voor client-side, interactieve of regelmatig opnieuw gevalideerde gegevens.
Next.js dedupliceerd automatisch identieke fetch aanroepen in één render — dus u kunt dezelfde gegevens in een layout en een pagina ophalen zonder een dubbel verzoek.
Directe async gegevensverzameling in Server Components is een van de grootste vereenvoudigingen van de App Router — geen boilerplate, veilige server-side toegang, automatische deduplicatie en per-fetch caching die ook uw SSG/SSR/ISR keuze verdubbelt.
Weten dat u onafhankelijke fetches moet paralleliseren (waterfalls vermijden) is de sleutelprestatiepraktijk.