React Server Components — nə vaxt istifadə etməli, nə vaxt yox?

React Server Components — nə vaxt istifadə etməli, nə vaxt yox?

Salam, developer dostum. Əgər sən də LinkedIn-də "RSC is the future!" postlarını görüb "yaxşı, amma mən bunu real layihədə necə istifadə edim?" deyə düşünmüsənsə — bu məqalə sənin üçündür.

Bakıda interview-lara girirsən, "Next.js bilirsən?" sualından sonra indi "Server Components ilə işləmisən?" sualı da gəlir. Xüsusilə outsource şirkətlərində — Pasha Holding-in digital komandasından tutmuş kiçik startap-laradək — bu mövzu artıq "bilsən yaxşı olar" deyil, "bilməlisən" kateqoriyasına keçib.

Gəl konkret danışaq.

---

Server Components nədir, 30 saniyədə?

React Server Components (RSC) — komponentlərin serverdə render olunub, yalnız HTML nəticəsinin klientə göndərilməsi mexanizmidir. JavaScript bundle-a düşmür. State yoxdur. Event handler yoxdur. Sadəcə serverdə işləyib nəticəni göndərir.

Next.js 13+ (App Router) ilə default olaraq bütün komponentlər Server Component-dir. Klient tərəfi lazımdırsa, faylın əvvəlinə "use client" yazırsan.

---

Real rəqəmlər: niyə bu vacibdir?

Vercel-in 2025-ci il hesabatına görə:

• RSC istifadə edən layihələrdə JavaScript bundle ölçüsü orta hesabla 38% azalır
• Time to Interactive (TTI) göstəricisi 1.2-1.8 saniyə yaxşılaşır
• Largest Contentful Paint (LCP) orta 0.9 saniyə sürətlənir

Bu rəqəmlər Azərbaycan kontekstində daha da vacibdir. Niyə? Çünki istifadəçilərimizin böyük hissəsi mobil internetdən istifadə edir. Baku-metro-da 4G zəif olanda, 400KB bundle ilə 250KB bundle arasındakı fərq real UX fərqidir.

---

Nə vaxt Server Components istifadə etməlisən?

Budur, konkret ssenari siyahısı:

• ✅ Məlumat çəkib göstərmək lazımdırsa — məhsul siyahısı, blog post, profil səhifəsi
• ✅ Ağır kitabxanalar lazımdırsa — markdown render, syntax highlighting, tarix formatlaması (bu JS-lər klientə getmir)
• ✅ SEO kritikdirsə — e-commerce saytlar, media portallar
• ✅ Həssas məlumat varsa — API key-lər, database sorğuları birbaşa komponentdə
• ✅ Statik və ya nadir dəyişən content — haqqımızda səhifəsi, FAQ, sənədləşdirmə

Real kod nümunəsi: Məhsul siyahısı

Təsəvvür et, Bakıdakı bir e-commerce startup üçün məhsul səhifəsi yazırsan:

tsxKopyala
// app/products/page.tsx — Bu SERVER Component-dir (default)
import { db } from '@/lib/database';
import { ProductCard } from '@/components/ProductCard';
import { formatPrice } from '@/lib/utils';

export default async function ProductsPage() {
  // Birbaşa database-ə sorğu — API route lazım deyil!
  const products = await db.product.findMany({
    where: { inStock: true },
    orderBy: { createdAt: 'desc' },
    take: 20,
  });

  return (
    <section>
      <h1>Məhsullar</h1>
      <div className="grid grid-cols-3 gap-4">
        {products.map((product) => (
          <ProductCard
            key={product.id}
            name={product.name}
            price={formatPrice(product.priceAZN)}
            image={product.imageUrl}
          />
        ))}
      </div>
    </section>
  );
}

Diqqət et: async/await birbaşa komponentdə. useEffect yoxdur. useState yoxdur. Loading state yoxdur. fetch yoxdur. Sadəcə data gəlir, render olur, HTML göndərilir. Təmiz.

İndi isə səbətə əlavə düyməsi lazımdır — bu interaktivdir:

tsxKopyala
// components/AddToCartButton.tsx
"use client"; // ← Bu artıq CLIENT Component-dir

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>
  );
}

Budur əsas prinsip: məlumat Server-də, interaktivlik Client-də.

---

Nə vaxt Server Components istifadə etməməlisən?

Hər texnologiya kimi, RSC də hər yerə yapışdırılmalı deyil:

• ❌ Real-time interaktivlik — chat, canlı bildirişlər, drag-and-drop
• ❌ Browser API lazımdırsa — window, localStorage, navigator.geolocation
• ❌ Sıx state management — formlar, filtrlər, modal-lar
• ❌ Animasiyalar və gesture-lər — Framer Motion, react-spring
• ❌ Third-party widget-lər — xəritə, video player, ödəniş forması

Qısa qayda: istifadəçi nəyisə klikləyir, yazır, sürüşdürürsə — Client Component. Sadəcə oxuyursa — Server Component.

---

Praktiki arxitektura: necə bölmək lazımdır?

Bakıda real layihələrdə gördüyüm ən yaxşı yanaşma — "ağac yuxarıdan server, yarpaqlar client" prinsipidir:

Page (Server) → Layout (Server) → Sidebar (Server)
                                  → ProductList (Server)
                                      → ProductCard (Server)
                                          → AddToCartButton (Client)
                                          → WishlistHeart (Client)

Yəni klient komponentlərini mümkün qədər aşağıda, yarpaq səviyyəsində saxla. Nə qədər çox komponent serverdə qalsa, bundle bir o qədər kiçik olar.

---

Bakı developer-i üçün praktiki məsləhətlər

1. İş müsahibələrində: "RSC-nin nə olduğunu bilirəm" kifayət deyil. Yuxarıdakı kimi "nə vaxt hə, nə vaxt yox" izah edə bilsən, 1800-2500 AZN diapazonundakı middle pozisiyaları üçün fərqlənərsən.

2. Portfolio layihəndə: Next.js App Router ilə bir e-commerce və ya blog layihəsi qur. Server Components-dən real istifadəni göstər. GitHub README-də arxitektura qərarlarını izah et.

3. Mövcud layihələrdə: Birdən-birə hər şeyi RSC-yə keçirmə. Əvvəlcə data-fetching komponentlərini müəyyən et, onları server-ə daşı. Tədricən et.

4. Performansı ölç: next build çalışdır, "First Load JS" sütununa bax. RSC düzgün tətbiq etmisənsə, rəqəmlər aşağı düşməlidir.

---

Nəticə

React Server Components "gələcəyin texnologiyası" deyil — bu günün texnologiyasıdır. Amma hər alət kimi, düzgün yerdə istifadə etmək lazımdır.

Qayda sadədir:

Data oxumaq → Server. İstifadəçi ilə qarşılıqlı əlaqə → Client. Şübhən varsa → Server-dən başla, lazım olanda Client-ə keçir.

Bu prinsipi mənimsəsən, həm layihələrin sürətli olar, həm də interview-larda fərqlənərsən.

Kod yazmağa davam et, Bakı! 🚀

---

Baku Stack — Azərbaycanın developer icması üçün.