Conas a fhairsingítear sonraí san App Router?

Question

Accepted Answer

San App Router, fhairsingítear sonraí **go díreach i gcomhpháirteanna Fhreastalaí asincronach** ag baint úsáide as an API caighdeánach `fetch` — gan `getServerSideProps`, gan `useEffect`, gan sraith sonraí ar leith. Leagann Next.js síneadh ar `fetch` le rialuithe taisce. ## An patrún bunúsach ```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 go bhfeidhmíonn an chomhpháirt ar an bhfreastalaí, ní dhéanann tú ach `await` a chur ar do shonraí agus iad a úsáid — i bhfad níos simplí ná an damhsa `useEffect` + `useState` + staid lucháir ar thaobh an chliaint. ## Socrú an fhitir taisce in aghaidh an fhetch Leagann Next.js síneadh ar `fetch` ionas go roghnaíonn gach glao a iompar rindreachta: ```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 ``` Seo an tsamhail aontaithe an App Router: in ionad straitéis ar leibhéal an leathanaigh a roghnú, rialúitear an taisce ar leibhéal an fhetch sonraí. ## Fhairsingítear go comhthréimhseach chun scéimh ar leith a sheachaint ```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()]); ``` Cur ar bun iarrataí neamhspleácha le chéile le `Promise.all` ionas nach gcuireann siad bac ar a chéile. ## Fhairsingítear i gComhpháirteanna Chliaint ```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); ``` Déanann Comhpháirteanna Fhreastalaí an chuid is mó de na riachtanais a shásamh; bain úsáid as SWR/React Query do shonraí ar thaobh an chliaint, idirghníomhach, nó athmheasúnú go minic. ## Díthrí iarratá Go huathoibríoch **díthrítear** Next.js glaonna `fetch` ionann i rindreachta amháin — ionas gur féidir leat na sonraí céanna a fhairsingiú i leagan amach agus i leathanach gan iarratas dhúbailte. ## Fáth an tábhachta Is é an t-asbhaint dhíreach sonraí asincronach i gComhpháirteanna Fhreastalaí ceann de na simplíochtaí is mó den App Router — gan bhocht, rochtain dhílgheálach ar thaobh an fhreastalaí, díthrí uathoibríoch, agus taisce in aghaidh an fhetch ina dhúbailt do d'rogha SSG/SSR/ISR. Bheith ar an eolas go raibh gá le fetches neamhspleácha a chomhthréimhsigh (scéimh ar leith a sheachaint) an cleachtas feidhmíochta ríthábhachtach.