તમે App Router માં ડેટા કેવી રીતે લાવો છો?

Question

Accepted Answer

App Router માં તમે **સીધા async Server Components ની અંદર** ડેટા લાવો છો અને સ્ટાન્ડર્ડ `fetch` API નો ઉપયોગ કરો છો — `getServerSideProps` નહીં, `useEffect` નહીં, કોઈ અલગ ડેટા લેયર નહીં. Next.js `fetch` ને કેશિંગ નિયંત્રણ સાથે વધે છે. ## મૂળ પેટર્ન ```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}

; } ``` જેમ કે કમ્પોનેન્ટ સર્વર પર ચાલે છે, તમે સરળતાથી તમારા ડેટાની `await` કર વો અને તેનો ઉપયોગ કરો — ક્લાયંટ-સાઇડ `useEffect` + `useState` + લોડિંગ સ્થિતી નૃત્ય કરતાં ઘણું સરળ. ## કેશિંગ વ્યૂહરચના પ્રતિ-fetch સેટ કરવામાં આવે છે Next.js `fetch` બધે છે જેથી દરેક કોલ તેની રેન્ડરિંગ વર્તણૂક પસંદ કરે: ```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 ``` હે App Router નું એક્સત્રિત મોડેલ છે: પૃષ્ઠ-સ્તરીય વ્યૂહરચના પસંદ કરવાને બદલે, તમે ડેટા-fetch સ્તરે કેશિંગ નિયંત્રણ કરો છો. ## વોટરફોલ્સ ટાળવા માટે સમાંતર ફેચિંગ ```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()]); ``` `Promise.all` સાથે સ્વતંત્ર વિનંતીઓ એક સાથે કર્યો જેથી તેઓ એક બીજાને અવરોધિત ન કરે. ## ક્લાયંટ કમ્પોનેન્ટ્સમાં ફેચિંગ ```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 મોટાભાગની જરૂરિયાતો આવરી લે છે; ક્લાયંટ-સાઇડ, ઇન્ટરેક્ટિવ અથવા વારંવાર-પુનર્વલીકરણ ડેટા માટે SWR/React Query નો ઉપયોગ કરો. ## વિનંતી ડિડુપ્લીકેશન Next.js આપમેળે **ડિડુપ્લીકેટ** કરે છે એક રેન્ડરમાં સમાન `fetch` કોલ્સ — જેથી તમે લેઆઉટ અને પૃષ્ઠમાં બે વખત વિનંતી કર્યા વિના સમાન ડેટા લાવી શકો. ## તે શા માટે મહત્વપૂર્ણ છે Server Components માં સીધી async ડેટા ફેચિંગ એ App Router ની સૌથી મોટી સરળતાઓ પૈકી એક છે — કોઈ બોઇલરપ્લેટ નહીં, સુરક્ષિત સર્વર-સાઇડ অ্যাક્સેસ, આપમેળે ડિડુપ્લીકેશન, અને ફેચ કેશિંગ જે તમારી SSG/SSR/ISR પસંદ તરીકે દ્વિગુણ છે. સ્વતંત્ર ફેચ્સને સમાંતર કરવું જાણવું (વોટરફોલ્સ ટાળવું) એ મુખ્ય કાર્યક્ષમતા પ્રેક્ટિસ છે.