Hoe haalt u gegevens op in de App Router?

Question

Accepted Answer

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. ## Het basispatroon ```tsx // 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

{p.title}

; } ``` 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. ## Caching-strategie wordt per fetch ingesteld Next.js voegt `fetch` uit zodat elke aanroep zijn rendergedrag kiest: ```tsx 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. ## Parallelle opvraagingen om waterfalls te voorkomen ```tsx // ❌ 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. ## Ophalen in Client Components ```tsx "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. ## Verzoeken deduplicatie 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. ## Waarom het belangrijk is 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.