Si e marrni të dhënat në App Router?

Question

Accepted Answer

Në App Router marrni të dhënat **drejtpërdrejt brenda async Server Components** duke përdorur standard `fetch` API — pa `getServerSideProps`, pa `useEffect`, pa shtresë të veçantë të të dhënave. Next.js zgjeron `fetch` me kontroll memorjeje cache. ## Modeli bazik ```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}

; } ``` Dar komponenti funksionon në server, thjesht `await`-ini të dhënat tuaja dhe përdorini — shumë më thjeshtë se dansja `useEffect` + `useState` + gjendje ngarkese në anën e klientit. ## Strategjia e cache-it është vendosur për-fetch Next.js zgjeron `fetch` në mënyrë që secila thirrje zgjidh sjelljen e saj gjatë renderimit: ```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 ``` ky është modeli i bashkuar i App Router-it: në vend që të zgjidhni një strategji në nivel faqeje, ju kontrolloni cache-in në nivelin e marrjes të dhënave. ## Marrja e paralel për të shmangur ujërat ```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()]); ``` Lanso kërkesa të pavarura bashkë me `Promise.all` kështu që nuk e blokojnë njëra-tjetrën. ## Marrja në 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 mbulojnë shumicën e nevojave; përdorni SWR/React Query për të dhënat e klientit, interaktive ose të rivaliduara shpesh. ## Deduplikimi i kërkesës Next.js automatikisht **deduplikon** `fetch` thirrje identike në një render të vetëm — pra mund të merrni të njëjtat të dhëna në një layout dhe faqe pa kërkesë të dyfishtë. ## Pse është e rëndësishme Marrja e drejtpërdrejtë asinkrone të dhënave në Server Components është një nga poenovimet më të mëdha të App Router-it — pa boilerplate, qasje e sigurt në anën e serverit, deduplikimi automatik dhe cache për-fetch që vepron si zgjedhja juaj SSG/SSR/ISR. Dije të parallelizosh fetch-et e pavarura (duke shmangur ujërat) është praktika kyçe e performancës.