Fetching Data in Server Components
Server, Components, DIRECTLY, async, functions, ho, sakte, hain — await fetch(...), COMPONENT, ke, ANDAR, TOP-LEVEL, PAR, kiya, ja, sakta hai, TRADITIONAL, React, ke, useEffect, PATTERN, ki, ZAROORAT, ke, bina.
Ye, APPROACH, CLIENT-SIDE, JavaScript, bundle, KAAFI, KAM, karta hai — DATA-FETCHING, LOGIC, KABHI, BROWSER, ko, BHEJI, hi, NAHI, jaati, SIRF, RESULT, (HTML) BHEJA, jaata hai.
// Server component, DIRECTLY, async:
export default async function ProductsPage() {
const res = await fetch("https://api.example.com/products");
const products = await res.json();
return (
<ul>
{products.map(p => <li key={p.id}>{p.name}</li>)}
</ul>
);
}- Server components, mein, directly, async/await, USE, ho, sakta, hai
- useEffect/useState, loading, pattern, ki, ZAROORAT, nahi
- Client bundle, size, KAAFI, kam, hota, hai
Agar, MULTIPLE, components, (jaise, layout, aur, page) SAME, URL, ke, saath, fetch(), CALL, karte, HAIN, EK, SINGLE, render, PASS, ke, DAURAN, Next.js, AUTOMATICALLY, INHE, DEDUPLICATE, kar, deta hai — sirf, EK, ACTUAL, network, request, jaati, hai.
// layout.js aur page.js, DONO, mein — sirf, EK, HI, actual, request:
const user = await fetch("https://api.example.com/user");Server, Components, mein, fetch(), ki, JAGAH, DIRECTLY, ek, DATABASE, CLIENT, (jaise, Prisma, ya, Drizzle) bhi, USE, kiya, ja, sakta hai — REST, API, LAYER, ki, ZAROORAT, hi, NAHI, hoti INTERNAL, data, ke, liye.