React Server Components — Nə Vaxt İstifadə Etməli, Nə Vaxt Yox?

React Server Components — Nə Vaxt İstifadə Etməli, Nə Vaxt Yox?

Salam, developer dostlar! 👋

Bilirəm, LinkedIn-də hər ikinci post "RSC is the future" yazır. Bakıdakı müsahibələrdə də artıq "Server Components ilə işləmisən?" sualı standart olub. Amma gəlin açıq danışaq — RSC hər yerə lazım deyil, və onu yanlış yerdə istifadə etmək layihəni yaxşılaşdırmaq əvəzinə, əksinə mürəkkəbləşdirir.

Bu gün konkret danışacağıq: harada RSC işlət, harada klassik Client Component saxla.

---

RSC Nədir? 30 Saniyəlik Xülasə

React Server Components — komponentlərin serverdə render olunub, HTML kimi brauzerə göndərilməsidir. JavaScript bundle-a düşmürlər. Yəni istifadəçinin telefonu bu komponenti render etmir, server edir.

Next.js 13+ (App Router) ilə bu, default davranışdır. app/ qovluğunda yazdığın hər komponent — əgər "use client" yazmamısansa — Server Component-dir.

---

Nə Vaxt RSC İstifadə Etməlisən? ✅

1. Data Fetching — Ən Güclü Tərəfi

Əgər komponent sadəcə data çəkib göstərirsə, RSC mükəmməl seçimdir. API çağırışı serverdə baş verir, istifadəçi heç bir loading spinner görmür.

tsxKopyala
// app/products/page.tsx — Bu Server Component-dir (default)

async function ProductList() {
  const res = await fetch('https://api.example.az/products', {
    next: { revalidate: 60 } // 60 saniyə cache
  });
  const products = await res.json();

  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map((product: any) => (
        <div key={product.id} className="border p-4 rounded">
          <h3>{product.name}</h3>
          <p>{product.price} AZN</p>
        </div>
      ))}
    </div>
  );
}

export default ProductList;

Diqqət et: useState yoxdur, useEffect yoxdur, "use client" yoxdur. Komponent serverdə işləyir, HTML kimi gəlir. Bundle size-a 0 KB əlavə edir.

2. Statik Məzmun Səhifələri

Blog postları, haqqımızda səhifəsi, FAQ — bunlar RSC üçün idealdır. Bakıdakı startupların çoxunun landing page-ləri var. Bu səhifələr üçün client-side JS göndərməyin mənası yoxdur.

3. Verilənlər Bazasına Birbaşa Müraciət

RSC-nin gizli gücü — serverdə işlədiyi üçün birbaşa Prisma, Drizzle ORM və ya SQL ilə bazaya gedə bilərsən. API endpoint yazmağa ehtiyac yoxdur:

tsxKopyala
// app/dashboard/stats.tsx — Server Component
import { db } from '@/lib/db';

async function DashboardStats() {
  const totalOrders = await db.order.count();
  const revenue = await db.order.aggregate({
    _sum: { amount: true }
  });

  return (
    <div className="flex gap-6">
      <div className="stat-card">
        <span>Sifarişlər</span>
        <strong>{totalOrders}</strong>
      </div>
      <div className="stat-card">
        <span>Gəlir</span>
        <strong>{revenue._sum.amount} AZN</strong>
      </div>
    </div>
  );
}

Bunu client-side etsəydin: useEffect → fetch('/api/stats') → loading state → error handling... RSC ilə 10 sətirə enirsən.

4. Həssas Məlumatlar

API açarları, database URL-ləri, gizli token-lər — RSC-də istifadə etmək təhlükəsizdir, çünki bu kod heç vaxt brauzerə getmir.

---

Nə Vaxt RSC İstifadə Etməməlisən? ❌

1. İnteraktiv UI Elementləri

onClick, onChange, useState, useEffect — bunların hamısı Client Component tələb edir. Düyməyə basılma, modal açma, form idarəsi — bunlar RSC-də işləmir.

tsxKopyala
// components/AddToCartButton.tsx
"use client"; // ← Bu vacibdir!

import { useState } from 'react';

export function AddToCartButton({ productId }: { productId: string }) {
  const [loading, setLoading] = useState(false);

  const handleClick = async () => {
    setLoading(true);
    await fetch('/api/cart', {
      method: 'POST',
      body: JSON.stringify({ productId })
    });
    setLoading(false);
  };

  return (
    <button onClick={handleClick} disabled={loading}>
      {loading ? 'Əlavə olunur...' : 'Səbətə at'}
    </button>
  );
}

2. Real-time Funksionallıq

WebSocket, chat, live notification — bunlar client-side state tələb edir. RSC burada kömək etmir.

3. Browser API-ləri

localStorage, window, navigator, geolocation — bunlar yalnız brauzerdə mövcuddur. RSC serverdə işlədiyi üçün bu API-lərə çıxışı yoxdur.

---

Qızıl Qayda: Hybrid Yanaşma 🏆

Ən yaxşı arxitektura — Server Component-in içində Client Component istifadə etməkdir:

tsxKopyala
// app/products/[id]/page.tsx — Server Component
import { db } from '@/lib/db';
import { AddToCartButton } from '@/components/AddToCartButton';

export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await db.product.findUnique({
    where: { id: params.id }
  });

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p className="text-xl font-bold">{product.price} AZN</p>
      {/* Data serverdə gəldi, interaktivlik clientdə */}
      <AddToCartButton productId={product.id} />
    </div>
  );
}

Səhifənin 90%-i serverdə render olur, yalnız düymə client-side JavaScript tələb edir. Bu, bundle size-ı dramatik azaldır.

---

Rəqəmlərlə Danışaq 📊

Vercel-in rəsmi benchmark-lərinə və icma testlərinə görə:

• Bundle size: RSC istifadə edən səhifələrdə client JS həcmi ortalama 30-45% azalır
• First Contentful Paint: Ortalama 1.2 saniyə yaxşılaşma (3G şəbəkədə)
• Time to Interactive: Data-heavy səhifələrdə 800ms-ə qədər qazanc
• Lighthouse Performance skoru: Tipik e-commerce səhifədə 65 → 88-ə yüksəliş

Bakı kontekstində düşün: Azercell və ya Bakcell-in 4G-si bəzən yavaşlayır, xüsusilə metroda. Hər kilobyte JS-in azalması istifadəçi üçün real fərq deməkdir.

---

Müsahibə Sualı Bonusu 🎯

Bakıda artıq bir neçə şirkət — xüsusilə fintech və e-commerce sektorunda — Next.js App Router istifadə edir. Müsahibədə bu sual gələ bilər:

"Server Component ilə Client Component arasındakı fərq nədir və nə vaxt hansını seçərdiniz?"

Cavabın sadə olmalıdır: Data fetch edirsənsə → Server. İstifadəçi ilə interaksiya varsa → Client. Əksər halda ikisini birlikdə istifadə et.

Bu cavab sənə Bakıda 1500-2500 AZN arası maaş verən frontend pozisiyalarda üstünlük qazandıra bilər. Xüsusilə junior-dan mid-level-ə keçid edən developer-lər üçün bu bilik kritikdir.

---

Xülasə: Qərar Cədvəli

---

Son söz: RSC sehrli deyil, alətdir. Hər aləti öz yerində istifadə etmək — sənin professional developer kimi dəyərini artırır. Kodu ağıllı yaz, bundle-ı kiçik saxla, istifadəçini xoşbəxt et. 🚀

Sualın varsa, kommentlərdə yaz — cavab verəcəyik!