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.
// 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 <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}
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.
Next.js proširuje fetch tako da svaki poziv bira svoje ponašanje pri renderiranju:
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.
// ❌ 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.
"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.
Next.js automatski deduplicira identične fetch pozive u jednoj interpretaciji — pa možete dohvatiti iste podatke u postavci i stranici bez dvostrukog zahtjeva.
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.
Knjižnica IT pitanja za razgovore za posao s detaljnim odgovorima — od Juniora do Seniora.
Doniraj