🖥️
Server & Client Components

Server Components

The Default in App Router
💡 Server, Component, EK, "RESTAURANT, KITCHEN" jaisa, hai — PREPARATION, (RENDERING) SERVER, PAR, HOTI, hai, aur, CUSTOMER, (BROWSER) ko, SIRF, FINISHED, DISH, (HTML) MILТА, hai — RECIPE, (COMPONENT, CODE) KABHI, GHAR, tak, NAHI, JAATI.

App, Router, mein, HAR, COMPONENT, DEFAULT, mein, EK, Server, Component, hai — SERVER, PAR, RENDER, hota hai, aur, USKA, JavaScript, CODE, CLIENT, ko, KABHI, BHEJA, NAHI, jaata, sirf, RESULTING, HTML, bheja, jaata hai.

Server, Components, DIRECTLY, DATABASE, aur, FILE, SYSTEM, ko, ACCESS, kar, sakte, HAIN (jaise, DIRECTLY, EK, SQL, QUERY, RUN, karna) — SECURITY-SENSITIVE, LOGIC, (API, KEYS) SAFELY, SERVER, PAR, hi, REH, sakti, hai.

// Server component (default, — koi, "use client", nahi):
import { db } from "@/lib/db";

export default async function UserList() {
  const users = await db.query("SELECT * FROM users");   // direct, DB, access
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}
🖥️
Server, Component, EK, "RESTAURANT, KITCHEN" jaisa, hai — PREPARATION, (RENDERING) SERVER, PAR, HOTI, hai, aur, CUSTOMER, (BROWSER) ko, SIRF, FINISHED, DISH, (HTML) MILТА, hai — RECIPE, (COMPONENT, CODE) KABHI, GHAR, tak, NAHI, JAATI.
1 / 2
⚡ Quick Recap
  • Server Components = DEFAULT, App Router mein — server, PAR, render, hote, hain
  • JavaScript code, client, ko, KABHI, nahi, jaata
  • Direct, database/file, access, POSSIBLE, hai — SECURITY-SENSITIVE, logic, ke, liye, IDEAL
On this page (2 subtopics)

Ek, HEAVY, LIBRARY, (jaise, EK, LARGE, DATE-FORMATTING, ya, MARKDOWN-PARSING, library) ko, EK, Server, Component, mein, USE, karна, USKO, CLIENT, bundle, mein, INCLUDE, hone, se, BACHата, hai — library, sirf, SERVER, PAR, RUN, hoti hai.

💡Tip: Heavy, DEPENDENCIES, (jaise, markdown, parsers, image, processing, libraries) ko, JAHAN, TAK, POSSIBLE, ho, Server, Components, mein, hi, RAKHNA, CLIENT, bundle, size, ke, liye, HUGE, WIN, hai.

window, document, localStorage, JAISE, BROWSER, APIs, Server, Components, mein, USE, NAHI, kiye, ja, sakte — WOH, SERVER, PAR, RUN, hote, HAIN, jahan, YE, APIs, EXIST, hi, NAHI, karte.

// Server component mein, ye, ERROR, dega:
// const width = window.innerWidth;