Kako dohvatite podatke u App Routeru?

Question

Accepted Answer

U App Routeru podatke dohvaćate **izravno unutar async Server Components** koristeći standardni `fetch` API — bez `getServerSideProps`, bez `useEffect`, bez odvojenog sloja podataka. Next.js proširuje `fetch` s kontrolama cachiranja. ## Osnovni uzorak ```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}

; } ``` Budući da se komponenta izvršava na serveru, jednostavno `await` vaše podatke i koristite ih — mnogo jednostavnije od `useEffect` + `useState` + loading-state plesa na strani klijenta. ## Strategija cachiranja se postavlja po fetch-u Next.js proširuje `fetch` tako da svaki poziv bira svoje ponašanje pri renderiranju: ```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 ``` Ovo je ujedinjeni model App Routera: umjesto odabira strategije na razini stranice, kontrolirate cachiranje na razini fetch podataka. ## Paralelno dohvaćanje kako bi se izbjegli vodopadni tokovi ```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()]); ``` Pokrenut nezavisne zahtjeve zajedno s `Promise.all` kako se međusobno ne bi blokirati. ## Dohvaćanje u 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 pokrivaju većinu potreba; koristite SWR/React Query za podatke na strani klijenta, interaktivne ili često revalidacijske podatke. ## Deduplikacija zahtjeva Next.js automatski **deduplicira** identične `fetch` pozive u jednoj interpretaciji — pa možete dohvatiti iste podatke u postavci i stranici bez dvostrukog zahtjeva. ## Zašto je to važno Izravno asinkrono dohvaćanje podataka u Server Components je jedno od najvećih pojednostavljenja App Routera — bez boilerplate-a, siguran pristup na strani servera, automatska deduplikacija, i cachiranje po fetch-u koje je ujedno vaš izbor SSG/SSR/ISR. Znati paralelizirati nezavisne dohvate (izbjeći vodopadne tokove) ključna je praksa performansi.