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.
// 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>;
}
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.
Next.js augmenterer fetch, så hvert kald vælger sin rendering-adfærd:
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.
// ❌ 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.
"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.
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.
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.