I App Router henter du data direkte inne i async Server Components ved hjelp av standard fetch API — ingen getServerSideProps, ingen useEffect, intet eget datalag. Next.js utvider 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 kjører på serveren, venter du bare på dataene dine og bruker dem — mye enklere enn client-side useEffect + useState + loading-state dansen.
Next.js utviderer fetch slik at hver anrop velger sin renderingsatferd:
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 enhetlige modell: i stedet for å velge en strategi på sidenivå, kontrollerer du caching på data-fetch-nivå.
// ❌ 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 uavhengige forespørsler sammen med Promise.all slik at de ikke blokkerer hverandre.
"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 dekker de fleste behov; bruk SWR/React Query for client-side, interaktiv eller hyppig revalidering av data.
Next.js dedupliserer automatisk identiske fetch anrop i en enkelt render — så du kan hente de samme dataene i et layout og en side uten en dobbel forespørsel.
Direkte async datahenting i Server Components er en av App Routers største forenklinger — ingen boilerplate, sikker server-side tilgang, automatisk deduplisering og per-fetch caching som dobler som din SSG/SSR/ISR valg.
Å vite å parallellisere uavhengige hentinger (unngå vannfall) er praksis for nøkkelytelse.