Hvordan henter du data i App Router?

Question

Accepted Answer

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. ## Grunnmønsteret ```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 kjører på serveren, venter du bare på dataene dine og bruker dem — mye enklere enn client-side `useEffect` + `useState` + loading-state dansen. ## Caching-strategi er satt per-fetch Next.js utviderer `fetch` slik at hver anrop velger sin renderingsatferd: ```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 enhetlige modell: i stedet for å velge en strategi på sidenivå, kontrollerer du caching på data-fetch-nivå. ## Parallell henting for å unngå vannfall ```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 uavhengige forespørsler sammen med `Promise.all` slik at de ikke blokkerer hverandre. ## Henting 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 dekker de fleste behov; bruk SWR/React Query for client-side, interaktiv eller hyppig revalidering av data. ## Deduplisering av forespørsel 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. ## Hvorfor det er viktig 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.