Hvordan henter du data i App Router?

Question

Accepted Answer

I App Router henter du data **direkte inde i async Server Components** ved hjælp af standard `fetch` API — intet `getServerSideProps`, intet `useEffect`, intet separat datalayer. Next.js udvider `fetch` med caching-kontroller. ## Grundmønstret ```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}

; } ``` Fordi komponenten kører på serveren, `await`'er du blot dine data og bruger dem — meget enklere end klient-side `useEffect` + `useState` + loading-state dansen. ## Caching-strategi sættes per-fetch Next.js augmenterer `fetch`, så hvert kald vælger sin rendering-adfærd: ```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 ``` Dette er App Routers samlede model: i stedet for at vælge en side-niveau strategi, kontrollerer du caching på data-fetch-niveauet. ## Parallel hentning for at undgå vaterkander ```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 uafhængige anmodninger sammen med `Promise.all`, så de ikke blokerer hinanden. ## Hentning i 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 dækker de fleste behov; brug SWR/React Query til klient-side, interaktive eller hyppigt-revalidering data. ## Anmodnings-deduplikering Next.js **deduplikerer** automatisk identiske `fetch`-kald i en enkelt rendering — så du kan hente de samme data i et layout og en side uden en dobbelt anmodning. ## Hvorfor det betyder noget Direkte async datahentning i Server Components er en af App Routers største simplifikationer — ingen boilerplate, sikker server-side adgang, automatisk deduplikering og per-fetch caching, som også fungerer som dit SSG/SSR/ISR valg. At vide hvordan man parallelliserer uafhængige hentninger (undgå vaterkander) er den vigtigste performance-øvelse.