App Router میں آپ سیدھے طور پر async Server Components کے اندر معیاری fetch API استعمال کرتے ہوئے ڈیٹا حاصل کرتے ہیں — کوئی getServerSideProps نہیں، کوئی useEffect نہیں، کوئی الگ ڈیٹا لیئر نہیں۔ Next.js fetch کو caching کنٹرولز کے ساتھ بڑھاتا ہے۔
// 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 کرتے ہیں اور اسے استعمال کرتے ہیں — client-side useEffect + useState + loading-state کے رقص سے بہت سادہ ہے۔
Next.js fetch کو بڑھاتا ہے تاکہ ہر کال اپنی rendering کے برتاؤ کا انتخاب کرے:
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 کی سطح پر caching کو کنٹرول کرتے ہیں۔
// ❌ 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 زیادہ تر ضروریات کا احاطہ کرتے ہیں؛ client-side، interactive، یا بار بار-revalidating ڈیٹا کے لیے SWR/React Query استعمال کریں۔
Next.js خود بخود dedupes کرتا ہے ایک ہی render میں ایک جیسی fetch کالز — تو آپ ایک layout اور ایک صفحہ میں ایک جیسا ڈیٹا حاصل کر سکتے ہیں بغیر دوہری درخواست کے۔
Server Components میں براہ راست async ڈیٹا fetching App Router کی سب سے بڑی سادگیوں میں سے ایک ہے — کوئی boilerplate نہیں، محفوظ server-side رسائی، خودکار deduping، اور per-fetch caching جو آپ کے SSG/SSR/ISR کے انتخاب کے طور پر دوگنی کام کرتی ہے۔
آزاد fetches کو متوازی کرنا معلوم کرنا (waterfalls سے بچنا) اہم کارکردگی کی عملی روش ہے۔