Katika App Router unajifunza data moja kwa moja ndani ya async Server Components kwa kutumia fetch API ya kawaida — hakuna getServerSideProps, hakuna useEffect, hakuna safu ya data tofauti. Next.js inaongeza fetch na kontroli za caching.
// 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>;
}
Kwa sababu sehemu inaendesha kwenye seva, tu await data yako na iitumie — rahisi sana kuliko useEffect + useState + ndoto ya hali ya kupakia upande wa mteja.
Next.js inaongeza fetch ili kila simu kuchagua tabia yake ya uingizaji:
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
Hii ni mfano wa umoja wa App Router: badala ya kuchagua mkakati wa kiwango cha ukurasa, unakuza caching katika kiwango cha kujifunza data.
// ❌ 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()]);
Zindua ombi huru kwa pamoja na Promise.all ili kwamba hazijazuiliwa kila moja.
"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 hufunika mahitaji mengi; tumia SWR/React Query kwa mteja, interactive, au data inayotathminiwa mara kwa mara.
Next.js otomatiki inaondoa nakili fetch simu zinazofanana katika uingizaji mmoja — kwa hivyo unaweza kujifunza data sawa katika muundo na ukurasa bila ombi la mara mbili.
Moja kwa moja async data jifunza katika Server Components ni mojawapo ya App Router unyenyekevu mkubwa — walaumbi, usalama serva-upande upatikanaji, otomatiki kuondoa nakili, na kwa-fetch caching kwamba mara mbili kama yako SSG/SSR/ISR chaguo.
Kujua kwa sambamba kujifunza kujitegemea (kuepuka maji yanaanguka) ni tabia muhimu ya utendakazi.