Hur hämtar du data i App Router?

Question

Accepted Answer

I App Router hämtar du data **direkt inuti async Server Components** med hjälp av standard `fetch` API — ingen `getServerSideProps`, ingen `useEffect`, ingen separat datanivå. Next.js utökar `fetch` med cache-kontroller. ## Det grundläggande mö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}

; } ``` Eftersom komponenten körs på servern, `await`-ar du helt enkelt dina data och använder dem — mycket enklare än `useEffect` + `useState` + laddningsstatusdansen på klientsidan. ## Cache-strategi är inställd per-fetch Next.js utökar `fetch` så att varje anrop väljer sitt renderingsbeteende: ```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 ``` Detta är App Router:s enhetliga modell: i stället för att välja en strategi på sidnivå, styr du cachning på datahämtningsnivån. ## Parallell hämtning för att undvika vattenfall ```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()]); ``` Starta oberoende förfrågningar tillsammans med `Promise.all` så att de inte blockerar varandra. ## Hämtning 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 täcker de flesta behov; använd SWR/React Query för klientsidans, interaktiva eller ofta-revaliderad data. ## Avduplicering av förfrågan Next.js **deduplicerar** automatiskt identiska `fetch`-anrop i en enda rendering — så du kan hämta samma data i en layout och en sida utan en dubbelbegäran. ## Varför det spelar roll Direkt asynkron datahämtning i Server Components är en av App Router:s största förenklingar — ingen boilerplate, säker serversidåtkomst, automatisk deduplikering och per-fetch-cachning som fungerar som ditt SSG/SSR/ISR-val. Att veta hur man parallelliserar oberoende fetch (undviker vattenfall) är den viktigaste prestandapraktiken.