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 এর একীভূত মডেল: পৃষ্ঠা-স্তরের কৌশল বেছে নেওয়ার পরিবর্তে, আপনি ডেটা-ফেচ স্তরে ক্যাশিং নিয়ন্ত্রণ করেন।
// ❌ 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 কলগুলি dedupes করে — তাই আপনি একটি লেআউট এবং পৃষ্ঠায় একই ডেটা ফেচ করতে পারেন দ্বিগুণ অনুরোধ ছাড়াই।
Server Components এ সরাসরি async ডেটা ফেচিং App Router এর সবচেয়ে বড় সরলীকরণগুলির মধ্যে একটি — কোনো boilerplate নেই, নিরাপদ সার্ভার-সাইড অ্যাক্সেস, স্বয়ংক্রিয় deduping এবং প্রতি-ফেচ ক্যাশিং যা আপনার SSG/SSR/ISR পছন্দ হিসাবেও কাজ করে।
স্বাধীন ফেচগুলিকে সমান্তরাল করতে জানা (ওয়াটারফল এড়ানো) মূল পারফরম্যান্স অনুশীলন।