Yadda za ka kawo da bayani a cikin App Router?

Question

Accepted Answer

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. ## Tsarin asali ```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}

; } ``` 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. ## Dabarar cachewing an saita a bawere fetch Next.js ya shimfiɗa `fetch` ta hanyar cewa kowane kira ta zaɓi hali na rindowa: ```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 ``` 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. ## Parallel kawo-kawo don guje waterfalls ```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()]); ``` Kura aiki buhatattun batattu a jiya tare da `Promise.all` ta hanyar da sai ba su toshe juna. ## Kawo-kawo a cikin 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 sun kasar gida yawancin buɗe-buɗe; amfani SWR/React Query don gefen client, lalacewa, ko sau-sau saita bayani. ## Budewar buɗe-buɗe 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. ## Dalilin da ya sa yake mahimmanci 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.