Wie rufen Sie Daten im App Router ab?

Question

Accepted Answer

Im App Router rufen Sie Daten **direkt in async Server Components** mithilfe der standardmäßigen `fetch` API ab — kein `getServerSideProps`, kein `useEffect`, keine separate Datenschicht. Next.js erweitert `fetch` mit Caching-Kontrolle. ## Das grundlegende Muster ```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}

; } ``` Da die Komponente auf dem Server ausgeführt wird, `await`en Sie einfach Ihre Daten und verwenden sie — viel einfacher als der Client-seitige `useEffect` + `useState` + Loading-State-Tanz. ## Caching-Strategie wird pro Abruf festgelegt Next.js erweitert `fetch`, sodass jeder Aufruf sein Rendering-Verhalten wählt: ```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 ``` Dies ist das einheitliche Modell des App Routers: Anstatt eine Strategie auf Seitenebene zu wählen, kontrollieren Sie das Caching auf der Daten-Abruf-Ebene. ## Paralleles Abrufen um Wasserfälle zu vermeiden ```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()]); ``` Starten Sie unabhängige Anfragen zusammen mit `Promise.all`, damit sie sich nicht gegenseitig blockieren. ## Abrufen in 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 decken die meisten Anforderungen ab; verwenden Sie SWR/React Query für client-seitige, interaktive oder häufig revalidierte Daten. ## Anfrage-Deduplizierung Next.js **dedupliziert** automatisch identische `fetch`-Aufrufe in einem einzelnen Rendering — sodass Sie dieselben Daten in einem Layout und einer Seite abrufen können, ohne eine doppelte Anfrage zu verursachen. ## Warum es wichtig ist Direktes asynchrones Datenabrufen in Server Components ist eine der größten Vereinfachungen des App Routers — kein Boilerplate, sicherer Server-seitiger Zugriff, automatische Deduplizierung und Pro-Abruf-Caching, das auch als Ihre SSG/SSR/ISR-Wahl dient. Zu wissen, wie man unabhängige Abrufe parallelisiert (Wasserfälle vermeidet), ist die wichtigste Performance-Praxis.