App Router मा तपाइँ async Server Components भित्र सीधै डेटा फेच गर्नुहुन्छ standard fetch API प्रयोग गरेर — कुनै getServerSideProps छैन, कुनै useEffect छैन, कुनै अलग डेटा layer छैन। Next.js ले fetch लाई caching controls सँग विस्तार गर्छ।
// 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>;
}
किनकि component server मा चल्छ, तपाइँ केवल await गर्नुहुन्छ र डेटा प्रयोग गर्नुहुन्छ — client-side useEffect + useState + loading-state को नृत्य भन्दा धेरै सरल।
Next.js ले fetch लाई augment गर्छ ताकि प्रत्येक कल यसको rendering behavior छनौट गर्छ:
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 को unified model हो: page-level strategy छनौट गर्नुको सट्टा, तपाइँ data-fetch level मा 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()]);
स्वतन्त्र requests लाई Promise.all सँग एकसाथ शुरु गर्नुहोस् ताकि तिनीहरूले एक अर्कालाई block नगरून्।
"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, वा frequently-revalidating डेटाको लागि SWR/React Query प्रयोग गर्नुहोस्।
Next.js ले स्वचालित रूपमा एकल render मा समान fetch कलहरू dedupe गर्छ — त्यसैले तपाइँ layout र page मा एक ही डेटा फेच गर्न सक्नुहुन्छ बिना double request को।
Server Components मा सीधा async डेटा fetching App Router को सबै ठूलो simplifications मध्ये एक हो — कुनै boilerplate छैन, सुरक्षित server-side पहुँच, स्वचालित deduping, र per-fetch caching जो तपाइँको SSG/SSR/ISR छनौट को रूपमा काम गर्छ।
स्वतन्त्र fetches लाई parallelize गर्न जान्न (waterfalls बचाउन) मुख्य performance practice हो।