V App Routerju podatke pridobite neposredno znotraj async Server Components z uporabo standardnega fetch API — brez getServerSideProps, brez useEffect, brez ločene podatkovne plasti. Next.js razširja fetch s kontrolami predpomnjenja.
// 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>;
}
Ker se komponenta izvaja na strežniku, preprosto await-ate svoje podatke in jih uporabite — veliko preprosteje kot ples s useEffect + useState + stanjem nalaganja na strani odjemalca.
fetchNext.js razširja fetch, tako da vsak klic izbere svoje vedenje pri upodabljanju:
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 je poenoten model App Routerja: namesto da izberete strategijo na ravni strani, nadzirujete predpomnjenje na ravni pridobivanja podatkov.
// ❌ 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()]);
Začnite neodvisne zahteve skupaj z Promise.all, da se ne blokira ena drugo.
"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 pokrivajo večino potreb; za podatke na strani odjemalca, interaktivne ali pogosto ponovno preverjane podatke uporabite SWR/React Query.
Next.js avtomatično dedupplicira identične fetch klice pri enojnem upodabljanju — zato lahko pridobite enake podatke v postavitvi in strani brez dvojne zahteve.
Neposredno asinkrono pridobivanje podatkov v Server Components je ena največjih poenostavitev App Routerja — brez repetitivne kode, varen dostop na strani strežnika, avtomatska deduplikacija in predpomnjenje za vsak fetch, ki je hkrati vaša SSG/SSR/ISR izbira.
Vedeti, da je treba parallelizirati neodvisne fetch-e (izogibanje vodovjem), je ključna praksa za zmogljivost.
Knjižnica IT vprašanj za razgovore s podrobnimi odgovori — od začetnika do izkušenega.
Doniraj