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 करते हैं और इसका उपयोग करते हैं — क्लाइंट-साइड useEffect + useState + loading-state dance की तुलना में बहुत आसान।
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 स्तर पर 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 अधिकांश आवश्यकताओं को कवर करते हैं; क्लाइंट-साइड, इंटरेक्टिव, या बार-बार revalidating डेटा के लिए SWR/React Query का उपयोग करें।
Next.js स्वचालित रूप से एक ही render में समान fetch कॉल को deduplicate करता है — इसलिए आप double request के बिना layout और page में समान डेटा प्राप्त कर सकते हैं।
Server Components में direct async डेटा fetching App Router की सबसे बड़ी सरलताओं में से एक है — कोई boilerplate नहीं, सुरक्षित server-side access, स्वचालित deduping, और per-fetch caching जो आपकी SSG/SSR/ISR पसंद को दोगुना करती है।
स्वतंत्र fetches को समानांतर करना (waterfalls से बचना) जानना मुख्य प्रदर्शन अभ्यास है।