App Router માં તમે સીધા async Server Components ની અંદર ડેટા લાવો છો અને સ્ટાન્ડર્ડ fetch API નો ઉપયોગ કરો છો — getServerSideProps નહીં, useEffect નહીં, કોઈ અલગ ડેટા લેયર નહીં. Next.js fetch ને કેશિંગ નિયંત્રણ સાથે વધે છે.
// 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 <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}
જેમ કે કમ્પોનેન્ટ સર્વર પર ચાલે છે, તમે સરળતાથી તમારા ડેટાની await કર વો અને તેનો ઉપયોગ કરો — ક્લાયંટ-સાઇડ useEffect + useState + લોડિંગ સ્થિતી નૃત્ય કરતાં ઘણું સરળ.
Next.js fetch બધે છે જેથી દરેક કોલ તેની રેન્ડરિંગ વર્તણૂક પસંદ કરે:
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 સ્તરે કેશિંગ નિયંત્રણ કરો છો.
// ❌ 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 સાથે સ્વતંત્ર વિનંતીઓ એક સાથે કર્યો જેથી તેઓ એક બીજાને અવરોધિત ન કરે.
"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 પસંદ તરીકે દ્વિગુણ છે.
સ્વતંત્ર ફેચ્સને સમાંતર કરવું જાણવું (વોટરફોલ્સ ટાળવું) એ મુખ્ય કાર્યક્ષમતા પ્રેક્ટિસ છે.