Next.jsIntermediate
Data Fetching
Server ও Client Component-এ data fetch, caching এবং streaming — Next.js-এ ডেটা-ফেচিংয়ের সম্পূর্ণ বাংলা গাইড।
13টি অংশবাংলা ভাষায়
App Router-এ data fetch-এর জন্য দেখানো পদ্ধতি Server Components-এ async/await। এতে API key client-এ যায় না এবং code simple থাকে।
Server Component-এ fetch
app/blog/page.tsxtsx
tsx
export default async function Page() {
const data = await fetch("https://api.vercel.app/blog");
const posts = await data.json();
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}এখানে component-টি async function, আর fetch-কেই await করা হয়েছে।
Database/ORM দিয়ে
app/blog/page.tsxtsx
tsx
import { db, posts } from "@/lib/db";
export default async function Page() {
const allPosts = await db.select().from(posts);
return (
<ul>
{allPosts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}Server Component-এ database query করলেও credential/client bundle-এ যায় না — সম্পূর্ণ server-এ থাকে।
Parallel Data Fetching
app/artist/[username]/page.tsxtsx
tsx
export default async function Page({
params,
}: {
params: Promise<{ username: string }>;
}) {
const { username } = await params;
// একসাথে শুরু হয়
const artistData = fetch(`https://api.example.com/artist/${username}`);
const albumsData = fetch(`https://api.example.com/artist/${username}/albums`);
const [artist, albums] = await Promise.all([artistData, albumsData]);
return (
<>
<h1>{artist.name}</h1>
{/* ... */}
</>
);
}Client Component-এ fetch
Client-এ data fetch-এর জন্য React-এর use API অথবা SWR / TanStack Query (community library) ব্যবহার হয়।
app/ui/posts.tsxtsx
tsx
"use client";
import { use } from "react";
export default function Posts({
posts,
}: {
posts: Promise<{ id: string; title: string }[]>;
}) {
const allPosts = use(posts);
return (
<ul>
{allPosts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}Memoization
একই fetch request (same URL & options) একই render pass-এ memoized হয় — একাধিক component-এ একই data ডুপ্লিকেট fetch হয় না।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।