React 19 Server Components va Actions: Frontend dasturlashning yangi standartlari

React 19 tayyorlanishi bilan frontend olamida yuz bergan eng katta o'zgarish — komponentlarni to'g'ridan-to'g'ri serverda ijro etish (Server Components) va formalarga API yozmasdan ishlov berish (Server Actions) bo'ldi.

Server Components va Client Components farqlari

Ilgari brauzerga barcha React kodi (bundle JavaScript) yuklanib, mijoz kompyuterida render qilinardi. Bu sekin internet va eski qurilmalarda sahifaning sekin ochilishiga olib kelardi.

React 19 dagi Server Components ma'lumotlar bazasi va fayllar tizimi bilan to'g'ridan-to'g'ri serverning o'zida muloqot qiladi va brauzerga faqat tayyor yengil HTML/JSON yetkaziladi:

// React 19 Server Component misoli
import { db } from '@/lib/db';

export default async function ProfilePage({ userId }) {
  // To'g'ridan-to'g'ri serverda baza so'rovini bajarish
  const user = await db.user.findUnique({ where: { id: userId } });

  return (
    <div class="user-card">
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

Server Actions: Formalar bilan ishlash soddalashdi

Endi har bir forma uchun fetch('/api/user') yoki axios.post yozish hamda useState orqali yuklanish holatini boshqarish shart emas. React 19 dagi useActionState va useFormStatus buni o'z zimmasiga oladi.