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 + loading-state नृत्य पेक्षा खूप सोपे.
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 चे एकीकृत मॉडेल आहे: पृष्ठ-स्तरीय रणनीती निवडण्याऐवजी, तुम्ही डेटा-फेच स्तरावर कॅशिंग नियंत्रित करता.
// ❌ 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 स्वयंचलितपणे dedupes एकाच रेंडर मध्ये समान fetch कॉल — म्हणून तुम्ही लेआउट आणि पृष्ठ मध्ये समान डेटा दुहेरी विनंती न करता मिळवू शकता.
Server Components मध्ये थेट async डेटा fetching हे App Router च्या सर्वात मोठ्या सरलीकरणांपैकी एक आहे — कोणत्याही boilerplate नाही, सुरक्षित server-side प्रवेश, स्वयंचलित deduping, आणि प्रत्येक-fetch कॅशिंग जे तुमच्या SSG/SSR/ISR निवडीचे दुहेरी भूमिका बजावते.
स्वतंत्र fetches (जलपातांचा दूर ठेवण्याचा) समांतर कसे करायचे हे जाणून घेणे हा मुख्य कार्यक्षमता प्रथा आहे.