Kif tieħu d-data fl-App Router?

Question

Accepted Answer

Fl-App Router tieħu d-data **direttament ġewwa async Server Components** billi tuża l-API standard `fetch` — ebda `getServerSideProps`, ebda `useEffect`, ebda data layer separat. Next.js testendi `fetch` b'kontrolli tal-caching. ## Il-mudell bażiku ```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}

; } ``` Bħal il-komponent jimxu fuq is-server, sempliċiment `await` id-data tiegħek u ġibha — ħafna aktar sempliċi mill-`useEffect` + `useState` + loading-state tal-naħa tal-client. ## Strateġija tal-caching tistabbilixxi għal kull-fetch Next.js testendi `fetch` sabiex kull sejħa tagħżel il-imġiba tar-rendering tagħha: ```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 ``` Da huwa l-mudell unifikat tal-App Router: minflok tagħżel strateġija tal-livell tal-paġna, inti tikkontrolla l-caching fil-livell tal-data-fetch. ## Fetching parallelu biex tevita l-cascades ```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()]); ``` Ibda riċjesti indipendenti flimkien b' `Promise.all` sabiex ma jblokkawhx lil xulxin. ## Fetching fil-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); ``` Is-Server Components jkopru l-ħtieġ tal-ħafna; għal data tal-client-side, interattiva, jew li tirrikjedi validazzjoni spissa, uża SWR/React Query. ## Deduplicazzjoni tar-riċjesti Next.js awtomatikament **deduplica** sejħat `fetch` identiċi f'rendering wieħed — allura tista' tieħu d-data ذat ذ istess f'layout u paġna mingħajr riċjesta doppja. ## Għaliex huwa importanti Il-fetching dirett ta' data async fl-Server Components hija waħda mill-akbar simplifikazzjonijiet tal-App Router — ebda boilerplate, aċċess sigur server-side, deduping awtomatiku, u caching per-fetch li jaħdem doppju bħala l-għażla tiegħek SSG/SSR/ISR. Il-għarfien ta' kif teparallizza fetches indipendenti (evita l-cascades) hija l-prattika tal-prestazzjoni ewlenija.