Server va Client Components kompozitsiyasi: children naqshi va seriyalanadigan props

Qisqacha: Client komponent server komponentni import qila olmaydi — import qilsa, u ham client bo'lib qoladi. Lekin uni qabul qila oladi: server sahifa server komponentni chizadi va tayyor natijani client komponentga children yoki boshqa prop sifatida beradi. Client chegarasidan ("use client" fayliga) o'tadigan props esa seriyalanadigan bo'lishi kerak: satr, son, massiv, oddiy obyekt, Date, Map, JSX — mumkin; oddiy funksiya va klass nusxasi — build xatosi. Istisno: "use server" funksiyalari (Server Actions) prop bo'lib o'ta oladi.

Bu darsda

• Server komponentni client komponent ichiga children va nomli prop bilan joylaysiz.
• Kanondagi TegFiltri nega kartalarni tugun prop'i bilan olishini tushuntirasiz.
• Client chegarasidan qanday qiymatlar o'tishini bilasiz va uchta haqiqiy build xatosini o'qiysiz.
• Prop nomi xato xabarini qanday o'zgartirishini ko'rasiz (onBos va amal).
• portfolio ning blog holatini commit qilasiz.

Oldin bilishingiz kerak: Client Components, Server Components, children va kompozitsiya, Navigatsiya.

1. Nega bu kerak?

Navigatsiya darsidagi TegFiltri ni eslang. U client komponent: useSearchParams bilan ?teg= ni o'qiydi va loyihalarni filtrlaydi. Har loyiha esa LoyihaKartasi bilan chiziladi — server komponent: sana formatlaydi, havola yasaydi, JS'siz.

Eng oddiy yo'l — TegFiltri ichida import { LoyihaKartasi } from "./LoyihaKartasi" va <LoyihaKartasi loyiha={…} />. Ishlaydi. Lekin Client Components darsidagi qoidani eslang: "use client" fayli import qilgan narsa client to'plamiga tushadi. LoyihaKartasi, uning oyniYoz funksiyasi, Link — hammasi brauzerga ketadi va brauzerda qayta chiziladi.

Kanon boshqacha qildi: kartalarni sahifa (server) chizadi va tayyor natijani TegFiltri ga beradi. TegFiltri ularni faqat joylaydi — ko'rsatadi yoki yashiradi. Bu darsda shu naqshni o'rganamiz.

Hayotiy o'xshatish: kitob do'koni va javon. Kitoblarni bosmaxona (server) chop etadi. Do'kon sotuvchisi (client) ularni javonga teradi, mijoz so'rasa — "faqat ingliz tilidagilar" deb saralaydi. Sotuvchi kitob chop etmaydi, faqat tayyorini joylaydi.

2. Import emas, qabul qilish

2.1 Ikki yo'l

flowchart TB
  subgraph A["Import — noto'g'ri"]
    A1["page.tsx (server)"] --> A2["TegFiltri (client)"]
    A2 -->|import| A3["LoyihaKartasi<br/>endi client"]
  end
  subgraph B["Prop sifatida — to'g'ri"]
    B1["page.tsx (server)"] -->|chizadi| B3["LoyihaKartasi<br/>server"]
    B1 -->|natijani beradi| B2["TegFiltri (client)"]
  end

Chap tomonda LoyihaKartasi client chegarasining ichida — client. O'ng tomonda u client chegarasidan tashqarida: sahifa uni chizadi, TegFiltri esa natijani (React elementni) oladi. Element — bu "nima chizilsin" degan tavsif, kod emas. U payload'da oddiy ["$","article",…] bo'lib boradi (Server Components darsidagi format).

2.2 Kanonda: tugun prop

loyihalar/page.tsx (server):

<Suspense fallback={<ul className="loyihalar">{kartalar}</ul>}>
  <TegFiltri
    elementlar={LOYIHALAR.map((l) => ({
      kalit: l.slug,
      teglar: l.texnologiyalar,
      tugun: <LoyihaKartasi loyiha={l} />,
    }))}
  />
</Suspense>

TegFiltri (client):

type Element = { kalit: string; teglar: string[]; tugun: React.ReactNode };

// Kartalar serverda chiziladi va bu yerga `tugun` (ReactNode)
// bo'lib keladi — Client Component Server Component'ni import
// qilmaydi, faqat qabul qiladi (N-11).
export function TegFiltri({ elementlar }: { elementlar: Element[] }) {
  // … filtr …
  return (
    <ul className="loyihalar">
      {korinadi.map((e) => (
        <li key={e.kalit}>{e.tugun}</li>
      ))}
    </ul>
  );
}

Kanon izohi telefonga moslab qatorlarga bo'lindi. Har element uch qismdan:

TegFiltri kartaning ichini bilmaydi va bilishi shart emas. U faqat filtr uchun kerak narsani (teglar) oladi. LoyihaKartasi.tsx client to'plamiga umuman kirmadi.

Kanon o'lchovi buni tasdiqlaydi: holat 06 da uchta client komponent (NavHavola, OrqagaTugmasi, TegFiltri) qo'shilganda JS +2.0 KB. Kartalar brauzer JS'iga hech narsa qo'shmadi.

2.3 children — eng oddiy shakli

Nomli prop (tugun) o'rniga ko'pincha children ishlatiladi — children va kompozitsiya darsidagi o'sha children. Masalan, yig'iladigan blok: tugma va ochiq/yopiq holat — client, ichidagi matn — server.

// Yigiladigan.tsx — "use client": faqat holat va tugma
// page.tsx — server:
<Yigiladigan sarlavha="Case study">
  <CaseStudy loyiha={loyiha} /> {/* server komponent */}
</Yigiladigan>

Yigiladigan {ochiq && children} qiladi. CaseStudy serverda chizilgan, uning kodi brauzerga kelmaydi.

2.4 Natija oynasida: children qayta chizilmaydi

Bu naqshning yana bir foydasi bor — hatto oddiy React'da ham. Client komponentning holati o'zgarganda, unga children bo'lib kelgan element qayta chizilmaydi: u ota komponentda yaratilgan, ota esa qayta chizilmadi.

import { useState, type ReactNode } from "react";

// client: faqat holat va tugma
function Collapsible({ children }: { children: ReactNode }) {
  const [open, setOpen] = useState(true);
  console.log("Collapsible chizildi");
  return (
    <section>
      <button onClick={() => setOpen(!open)}>
        {open ? "Yopish" : "Ochish"}
      </button>
      {open && children}
    </section>
  );
}

// "server" qismi: og'ir karta
function ProjectCard() {
  console.log("ProjectCard chizildi");
  return <p>Vazifalar ilovasi — case study</p>;
}

export default function App() {
  return (
    <Collapsible>
      <ProjectCard />
    </Collapsible>
  );
}

Konsolda:

Collapsible chizildi
ProjectCard chizildi
Collapsible chizildi
Collapsible chizildi
ProjectCard chizildi

Ekranda:

Yopish
Vazifalar ilovasi — case study

O'qing: «Yopish» bosilganda faqat Collapsible chizildi — karta yashirildi. «Ochish» da karta qayta paydo bo'ldi, shuning uchun u yana chizildi (daraxtga qaytdi). Lekin Collapsible ning o'zi ProjectCard ni yaratmaydi — uni App yaratgan. Next.js'da App o'rnida server sahifa turadi: u <ProjectCard /> ni serverda chizadi, brauzerga tayyor natija keladi — ProjectCard kodi umuman yo'q.

Tekshirib ko'ring: TegFiltri ichida import { LoyihaKartasi } qilinsa, LoyihaKartasi dagi oyniYoz (sana formatlash) qayerda ishlaydi?

3. Client chegarasidan nima o'tadi?

3.1 Seriyalash

Server sahifa client komponentga prop berganda, u prop'ni matnga aylantirishi kerak — RSC payload ichiga yozish uchun. Bu — seriyalash (serialize, JSON asoslari darsida JSON.stringify bilan ko'rgansiz). Matnga aylanmaydigan narsa client chegarasidan o'tmaydi.

React'ning formati JSON'dan kengroq:

3.2 Biz sinadik: Date va Map o'tadi

Tajriba: server sahifa client komponentga Date va Map beradi, client esa ularning turini tekshiradi:

// server sahifa
<Vaqt
  sana={new Date("2026-10-21")}
  royxat={new Map([["osh", 35000]])}
/>

// client komponent ichida
{sana instanceof Date ? "Date" : typeof sana} |
{royxat instanceof Map ? `Map(${royxat.size})` : typeof royxat}

next build + next start, brauzerda:

MATN: Date | Map(1)

Ikkalasi ham asl turida keldi — JSON.stringify bo'lganida Date satrga, Map esa bo'sh {} ga aylanardi. React payload formati bu turlarni alohida belgilaydi.

3.3 Biz sinadik: klass nusxasi

class Narx {
  constructor(public som: number) {}
}
// …
<Korsat qiymat={new Narx(35000)} />

Build:

Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.
  {qiymat: {som: 35000}}
           ^^^^^^^^^^^^

Tarjimasi: "Server Component'dan Client Component'ga faqat oddiy obyektlar va bir nechta o'rnatilgan turlar o'tadi. Klasslar yoki prototipi null obyektlar qo'llab-quvvatlanmaydi". Sababi: klass nusxasi o'z metodlari bilan yashaydi. Matnga faqat maydonlar (som: 35000) aylanadi; brauzerda new Narx qayta yaratilmaydi, metodlar yo'qoladi. React yarim-chala obyekt bergandan ko'ra xato beradi.

Davosi — oddiy obyekt: qiymat={{ som: narx.som }}. Baza kutubxonalari (ORM) ko'pincha klass nusxasi qaytaradi — client'ga berishdan oldin kerakli maydonlarni oddiy obyektga ko'chiring.

3.4 Biz topdik: funksiya — nomiga qarab ikki xil xabar

Endi funksiya. Client tugma onBos prop'ini oladi, server sahifa unga strelka funksiya beradi:

<Tugma onBos={() => console.log("bosildi")} />

Build:

Error: Event handlers cannot be passed to Client Component props.
  {onBos: function onBos}
          ^^^^^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.

Xuddi shu tajriba, faqat prop nomi amal:

<Tugma amal={() => console.log("bosildi")} />

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
  {amal: function amal}
         ^^^^^^^^^^^^^

Bir xil xato, ikki xil matn. React prop nomi on bilan boshlansa, uni "hodisa ishlovchisi" deb taxmin qiladi va Server Components darsidagi onClick xabarini beradi. Boshqa nomda — umumiyroq xabar: "Funksiyalarni "use server" bilan ochiq belgilamaguncha Client Component'ga to'g'ridan uzatib bo'lmaydi. Yoki bu funksiyani qaytarish emas, chaqirish kerakmidi?"

Ikkinchi xabar ikkita yo'l ko'rsatadi:

• "use server" — funksiya Server Action bo'lsa, u client chegarasidan o'tadi: brauzerga funksiyaning o'zi emas, uni chaqirish uchun havola boradi. Bosilganda brauzer serverga so'rov yuboradi. Bu — Server Actions I darsining mavzusi.
• "chaqirish kerakmidi?" — ko'pincha xato shu: {narxniHisobla} o'rniga {narxniHisobla()} yozish kerak edi — natija (son) o'tadi, funksiya emas.

Agar mantiq brauzerda bajarilishi kerak bo'lsa (masalan console.log), funksiyani client komponentning o'zida e'lon qiling — server unga faqat ma'lumot beradi.

Tekshirib ko'ring: server sahifa client komponentga loyiha={LOYIHALAR[0]} beradi. Obyektda sana: "2026-09", teglar: [...] va formatla() metodi bor (obyekt literalida yozilgan funksiya). Build o'tadimi?

4. Props narxi — payload hajmi

Seriyalanadigan bo'lish — yagona shart emas. Har prop RSC payload'ga yoziladi va brauzerga ketadi. Server sahifa TegFiltri ga butun loyiha obyektlarini (case study matnlari, raqamlar jadvali bilan) bersa — hammasi payload'da, garchi filtr faqat teglar ni ishlatsa ham.

Kanon shuning uchun elementlar ni ataylab ingichka qildi: kalit, teglar va tayyor tugun. Qoida: client komponentga kerak bo'lgan minimumni bering. Bu ham hajm, ham xavfsizlik masalasi — server ma'lumotidagi maxfiy maydon (masalan foydalanuvchi emaili) client prop'ga tushsa, u payload'da ochiq turadi. Uni Data Access Layer darsida tizimli hal qilamiz.

5. Ikki maxsus "yo'lovchi": Promise va qo'riqchi paketlar

5.1 Promise — kutmasdan berish

Jadvaldagi Promise qatori g'alati tuyulishi mumkin: va'da ham matnga aylanadimi? Ha — React uni alohida qo'llab-quvvatlaydi. Server sahifa ma'lumotni kutmasdan, Promise'ning o'zini client komponentga beradi. Client esa uni use() bilan o'qiydi, kutish paytida eng yaqin <Suspense> fallback'i ko'rinadi:

// page.tsx — server: await YO'Q
const izohlar = izohlarniOl(slug); // Promise
return (
  <Suspense fallback={<p>Izohlar yuklanmoqda…</p>}>
    <Izohlar izohlar={izohlar} />
  </Suspense>
);

// Izohlar.tsx — "use client"
const royxat = use(izohlar);

Foydasi: sahifaning qolgan qismi izohlarni kutmaydi, HTML darhol keta boshlaydi; ma'lumot tayyor bo'lganda oqimning keyingi bo'lagida keladi. Bu naqsh Streaming va Suspense darsida o'lchanadi. portfolio kanonida ishlatilmagan: GitHub bloki to'liq server komponent bo'lib qoldi, chunki unda interaktivlik yo'q.

5.2 server-only va client-only — client chegarasining qo'riqchilari

Client Components darsida ko'rgan ikki paket kompozitsiyada ayniqsa kerak. Kompozitsiya naqshida server va client fayllar yonma-yon turadi, import qilish oson — xato ham oson. Shuning uchun qo'riqchi kerak. import "server-only" qatori "bu fayl hech qachon client to'plamiga tushmasin" degan qat'iy qoida: kimdir uni client komponentga import qilsa, build to'xtaydi. blog.ts shunday himoyalangan.

Teskarisi — client-only: faqat brauzerda ma'noli modul (masalan window bilan ishlovchi analitika) server tomonda import qilinsa, build to'xtaydi. Ikkalasi ham kodni o'zgartirmaydi — faqat client chegarasini buzishga yo'l qo'ymaydi.

6. Uchinchi tomon komponentlari

Ko'p React kutubxonalari (karusel, xarita, sana tanlagich) hook va brauzer API ishlatadi, lekin fayllarida "use client" yo'q — ular Next.js'gacha yozilgan. Ularni server sahifaga to'g'ridan qo'ysangiz, Client Components darsidagi "depends on useState" xatosi chiqadi.

Yechim — o'z kichik "o'rash" faylingiz:

// komponentlar/Karusel.tsx
"use client";

export { Carousel as Karusel } from "boshqa-kutubxona";

Fayl bitta ish qiladi: kutubxona komponentini client chegarasining ichiga olib kiradi. Endi server sahifa Karusel ni bemalol ishlatadi. Bu naqsh va provider'lar — keyingi darsda.

7. Portfolio qadami: blog va commit (3-qism)

Server Components va Client Components darslaridagi o'zgarishlar bitta holat (11) bo'ldi. Bugun yangi fayl yo'q — kompozitsiya naqshi holat 06 dan beri TegFiltri da ishlaydi. Bu darsda uni tushundingiz; endi tekshiruv va commit.

git add -A
git commit

Commit (kanon): Blog: Markdown postlar serverda (marked, server-only), Ulashish tugmasi — client orol.

8. Ko'p uchraydigan xatolar

9. Mashqlar

Mashqlar kurs/mashqlar/23/11-kompozitsiya/ da.

1-mashq (oson): o'tadimi?

Server sahifadan client komponentga:

• title="Salom" —
• createdAt={new Date()} —
• onSave={() => save()} —
• tags={new Set(["React"])} —
• user={new User("Ali")} —
• card={<LoyihaKartasi loyiha={l} />} —

2-mashq (o'rta): seriyalash tekshiruvchisi

Funksiya yozing: findProblem(value, path = "props") — qiymatni chuqur tekshiradi va client chegarasidan o'tmaydigan birinchi qismning yo'lini qaytaradi ("props.user"), hammasi joyida bo'lsa — null. O'tmaydi: funksiya; prototipi Object.prototype yoki Array.prototype bo'lmagan obyekt (Date, Map, Set — istisno, o'tadi). Ishora: Object.getPrototypeOf va instanceof.

const ALLOWED = [Date, Map, Set];

function findProblem(value, path = "props") {
  if (typeof value === "function") return path;
  if (value === null || typeof value !== "object") return null;
  if (ALLOWED.some((T) => value instanceof T)) return null;
  const proto = Object.getPrototypeOf(value);
  if (proto !== Object.prototype && proto !== Array.prototype) {
    return path;
  }
  for (const [key, child] of Object.entries(value)) {
    const found = findProblem(child, `${path}.${key}`);
    if (found) return found;
  }
  return null;
}

class User {
  constructor(name) {
    this.name = name;
  }
}

console.log(findProblem({ title: "Salom", tags: ["React"] }));
console.log(findProblem({ at: new Date(), prices: new Map() }));
console.log(findProblem({ list: [{ ok: 1 }, { save() {} }] }));
console.log(findProblem({ user: new User("Ali") }));

null
null
props.list.1.save
props.user

3-mashq (qiyin): tablar — server panellar, client tanlov

Tabs client komponentini yozing: u panels: Record<string, ReactNode> oladi (kalit — tab nomi) va faqat tanlangan panelni ko'rsatadi. Tugmalar — kalitlardan. Joriy tab — aria-pressed. Panellar App da ("server" o'rnida) yaratilsin va har biri chizilganda konsolga yozsin. Tekshiring: tab almashganda faqat ko'rinadigan panel chiziladimi?

import { useState, type ReactNode } from "react";

function Tabs({ panels }: { panels: Record<string, ReactNode> }) {
  const names = Object.keys(panels);
  const [active, setActive] = useState(names[0]);
  return (
    <>
      {names.map((name) => (
        <button
          key={name}
          aria-pressed={name === active}
          onClick={() => setActive(name)}
        >
          {name}
        </button>
      ))}
      <div>{panels[active]}</div>
    </>
  );
}

function Panel({ title }: { title: string }) {
  console.log(`${title} chizildi`);
  return <p>{title} paneli</p>;
}

export default function App() {
  return (
    <Tabs
      panels={{
        Loyihalar: <Panel title="Loyihalar" />,
        Blog: <Panel title="Blog" />,
      }}
    />
  );
}

Loyihalar chizildi
Blog chizildi
Loyihalar chizildi

LoyihalarBlog
Loyihalar paneli

4-mashq: Portfolio qadami

Blog holatini yakunlang: npm run lint, npm run tip, npm run build — toza. TegFiltri ni ko'zdan kechiring: u LoyihaKartasi ni import qilmayotganiga ishonch hosil qiling (faqat tugun). Keyin commit.

10. Real ishda

• "Server sahifa, client orollar, server bolalar" — App Router loyihalarining asosiy shakli. Modal, tab, akkordeon — client qobiq, ichidagi mazmun — server.
• ORM va klasslar — baza kutubxonalari klass nusxalari qaytaradi; client'ga berishdan oldin oddiy obyektga "tekislash" — kundalik ish.
• Kod tekshiruvida "nega bu butun obyekt client'ga ketyapti?" — payload hajmi va ma'lumot sizishi uchun eng ko'p beriladigan savollardan biri.
• Intervyu savoli: "Client komponent ichida Server Component ishlatsa bo'ladimi?" To'g'ri javob: import qilib emas, children yoki prop sifatida qabul qilib — ha.

Xulosa

• Client komponent server komponentni import qilsa — u client bo'ladi; to'g'ri yo'l — children yoki ReactNode prop bilan qabul qilish.
• Kanondagi TegFiltri kartalarni tugun bilan oladi: filtr client, kartalar server, JS'ga qo'shimchasiz.
• Client chegarasidan seriyalanadigan props o'tadi: satr, son, massiv, oddiy obyekt, Date, Map, Set, JSX, Promise, Server Action.
• Klass nusxasi va oddiy funksiya — build xatosi; on… nomli funksiya boshqa matn beradi.
• Har prop payload'ga yoziladi: client'ga faqat kerakli minimum.

Keyingi dars: Provider'lar va 3-tomon kutubxonalar — Context va tema provider'ini root layout'ga qo'yib, sahifalarni baribir serverda qoldiramiz.

Manbalar

• Next.js hujjati — Server and Client Components: Interleaving, Passing data: https://nextjs.org/docs/app/getting-started/server-and-client-components (next 16.4.0 paketi ichidagi hujjat, 2026-10-21 da o'qildi)
• React hujjati — 'use client': serializable types: https://react.dev/reference/rsc/use-client#serializable-types
• Kanon o'lchovlari: portfolio v2, holat 06 (TegFiltri, JS +2.0 KB) va holat 11. Date/Map, klass va funksiya prop'lari tajribasi — biz ishga tushirdik (next 16.4.0, next build + next start).