A cikin App Router kana kawo da bayani kai tsaye a cikin async Server Components ta amfani da standard fetch API — babu getServerSideProps, babu useEffect, babu kewayyar bayani na kadai. Next.js ya shimfiɗa fetch tare da iko na cachewing.
A cikin App Router kana kawo da bayani kai tsaye a cikin async Server Components ta amfani da standard fetch API — babu getServerSideProps, babu useEffect, babu kewayyar bayani na kadai. Next.js ya shimfiɗa fetch tare da iko na cachewing.
// 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>;
}
Domin gida yana aiki akan uservista, kuna kawai await gwajinku bayani kuma kuna amfani dashi — da kyau fiye da useEffect + useState + zaman carki na gefen client.
Next.js ya shimfiɗa fetch ta hanyar cewa kowane kira ta zaɓi hali na rindowa:
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
Han ta yunkurin haɗa-haɗa na App Router: a maimakon zaɓi dabarar mataki na shafi, kuna sarrafa cachewing a mataki na bayani fetch.
// ❌ 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()]);
Kura aiki buhatattun batattu a jiya tare da Promise.all ta hanyar da sai ba su toshe juna.
"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 sun kasar gida yawancin buɗe-buɗe; amfani SWR/React Query don gefen client, lalacewa, ko sau-sau saita bayani.
Next.js ta yarda dace budewar iri-iri fetch kira a rindowa ɗaya — ta hanyar da sai ka kawo da bayani iri ɗaya a zariya da shafi ba tare da soɗa buɗe jiya.
Daidai ma aiki async data kawo-kawo a cikin Server Components ɗaya ne ninka gajere raɗi na App Router — babu boilerplate, ajiyar uservista mai lalacewa, dace budewar, da per-fetch cachewing da ya dube a matsayin zaɓinku SSG/SSR/ISR.
Sanin parallelize buhatattun kawo-kawo (guje waterfalls) shine muhimmancin aiki yadda yakamata.