Unajifunzaje data katika App Router?

Question

Accepted Answer

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. ## Muundo wa msingi ```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}

; } ``` 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. ## Mkakati wa caching umewekwa kwa kila-fetch Next.js inaongeza `fetch` ili kila simu kuchagua tabia yake ya uingizaji: ```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 ``` Hii ni mfano wa umoja wa App Router: badala ya kuchagua mkakati wa kiwango cha ukurasa, unakuza caching katika kiwango cha kujifunza data. ## Kujifunza sambamba kuepuka maji yanaanguka ```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()]); ``` Zindua ombi huru kwa pamoja na `Promise.all` ili kwamba hazijazuiliwa kila moja. ## Kujifunza katika 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 hufunika mahitaji mengi; tumia SWR/React Query kwa mteja, interactive, au data inayotathminiwa mara kwa mara. ## Kuondoa nakili ya ombi 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. ## Kwa nini ni muhimu 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.