Jak pobierać dane w App Router?

Question

Accepted Answer

W App Router pobierasz dane **bezpośrednio wewnątrz asynchronicznych Server Components** przy użyciu standardowego API `fetch` — brak `getServerSideProps`, brak `useEffect`, brak oddzielnej warstwy danych. Next.js rozszerza `fetch` za pomocą kontroli buforowania. ## Podstawowy wzorzec ```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}

; } ``` Ponieważ komponent działa na serwerze, po prostu `await` twoje dane i ich używasz — znacznie prostsze niż taniec po stronie klienta `useEffect` + `useState` + loading-state. ## Strategia buforowania jest ustawiana dla każdego pobierania Next.js rozszerza `fetch` tak, że każde wywołanie wybiera swoje zachowanie renderowania: ```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 ``` To jest ujednolicony model App Router: zamiast wybierać strategię na poziomie strony, kontrolujesz buforowanie na poziomie pobierania danych. ## Równoległe pobieranie, aby uniknąć efektu kaskady ```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()]); ``` Rozpoczyna niezależne żądania razem z `Promise.all`, aby się nawzajem nie blokowały. ## Pobieranie w komponentach klienta ```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 pokrywają większość potrzeb; użyj SWR/React Query dla danych po stronie klienta, interaktywnych lub często ponownie walidowanych. ## Deduplikacja żądań Next.js automatycznie **deduplikuje** identyczne wywołania `fetch` w jednym renderze — dzięki czemu możesz pobrać te same dane w układzie i na stronie bez podwójnego żądania. ## Dlaczego to ważne Bezpośrednie asynchroniczne pobieranie danych w Server Components to jedno z największych uproszczeń App Router — brak szablonów, bezpieczny dostęp po stronie serwera, automatyczna deduplikacja i buforowanie dla każdego pobierania, które podwaja twoją strategię SSG/SSR/ISR. Wiedzenie, aby równolegać niezależne pobierania (unikając efektu kaskady), to kluczowa praktyka wydajności.