Server va Client komponentlar

Komponentlar sukut bo‘yicha serverda ishlaydi

App Router-da har bir komponent, agar boshqacha ko‘rsatmasangiz, Server Component hisoblanadi. Bu oddiy React-dan katta farq qiladi, u yerda hamma narsa brauzerda ishlaydi.

Server Component serverda, so‘rov davomida ishlaydi. U brauzerga yuboriladigan HTML hosil qiladi. U hech qachon brauzerda ishlamagani uchun uning kodi foydalanuvchiga JavaScript sifatida yuborilmaydi — bu esa ilovangizni tez saqlaydi.

// app/page.tsx — a Server Component (the default)
export default function Page() {
  return <h1>Rendered on the server</h1>;
}

Server Component-lar nimada juda yaxshi

Serverda ishlagani uchun Server Component-lar brauzer kodi oson yoki xavfsiz bajara olmaydigan ishlarni qila oladi:

• Ma’lumotni to‘g‘ridan-to‘g‘ri olish — ma’lumotlar bazasini o‘qish yoki API-ga murojaat qilishni to‘g‘ridan-to‘g‘ri komponent ichida, ma’lumotga yaqin joyda bajaring.
• Sirlarni xavfsiz saqlash — API kalitlari va tokenlar serverda qoladi; ular hech qachon brauzerga yuborilmaydi.
• Kamroq JavaScript yuborish — ularning kodi serverda qoladi, shuning uchun sahifa tezroq yuklanadi.

Buning evaziga: ular serverda bir marta ishlaydi. Ular interaktivlikdan foydalana olmaydi — useState yo‘q, onClick yo‘q, window kabi brauzer API-lari yo‘q.

Client Component qachon kerak bo‘ladi

Interaktivlik yoki brauzer imkoniyatlari kerak bo‘lgan zahoti sizga Client Component kerak bo‘ladi. Buni faylning eng yuqorisiga "use client" qo‘yish orqali tanlaysiz:

// app/counter.tsx
"use client";
 
import { useState } from "react";
 
export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;
}

Quyidagilardan biri kerak bo‘lganda Client Component ishlating:

• React state yoki effektlar (useState, useEffect)
• Hodisa ishlovchilari (onClick, onChange, ...)
• Faqat brauzerga oid API-lar (window, localStorage)

Ular bitta daraxtda birlashadi

Butun ilova uchun faqat bittasini tanlamaysiz — siz ularni aralashtirasiz. Keng tarqalgan namuna: Server Component ma’lumotni oladi va uni interaktiv qismni boshqaradigan kichik Client Component-ga pastga uzatadi.

// app/page.tsx (Server Component)
import LikeButton from "./like-button";
 
export default async function Page() {
  const post = await getPost();          // runs on the server
  return (
    <article>
      <h1>{post.title}</h1>
      <LikeButton postId={post.id} />     {/* a Client Component */}
    </article

Interaktiv qismlarni kichik saqlang va "use client"-ni daraxt bo‘ylab pastga — u haqiqatan kerak bo‘lgan joyga imkon qadar yaqinroq — suring, shunda ilovangizning ko‘p qismi serverda qoladi.

Foydali umumiy qoida

Har bir komponentni Server Component sifatida boshlang. "use client"-ni faqat biror narsa sizni majbur qilganda (state, hodisalar yoki brauzer API-si) qo‘shing. Bu brauzerga yuboradigan JavaScript-ni kichik saqlaydi.

Asosiy fikrlar

• Komponentlar sukut bo‘yicha Server Component; ular serverda ishlaydi va hech qanday JavaScript yubormaydi.
• Server Component-lar ma’lumot ola oladi va sirlardan foydalana oladi, lekin state, hodisalar yoki brauzer API-laridan foydalana olmaydi.
• Interaktivlik uchun Client Component yaratish maqsadida faylning yuqorisiga "use client" qo‘shing.
• Ularni aralashtiring: serverda ma’lumot oling va "use client"-ni kichik interaktiv barglarga pastga suring.