React Server Components: Neden ve Nasıl?

1// Server Component - varsayılan
2async function ProductList() {
3  // Doğrudan veritabanından veri çek
4  const products = await db.products.findMany();
5  
6  return (
7    <ul>
8      {products.map(product => (
9        <ProductCard key={product.id} product={product} />
10      ))}
11    </ul>
12  );
13}
14
15// Client Component - "use client" ile işaretle
16"use client";
17
18import { useState } from 'react';
19
20function AddToCartButton({ productId }: { productId: string }) {
21  const [loading, setLoading] = useState(false);
22  
23  const handleClick = async () => {
24    setLoading(true);
25    await addToCart(productId);
26    setLoading(false);
27  };
28  
29  return (
30    <button onClick={handleClick} disabled={loading}>
31      {loading ? 'Ekleniyor...' : 'Sepete Ekle'}
32    </button>
33  );
34}

1// Optimum pattern: Server'da veri çek, Client'ta interaktif
2// page.tsx (Server)
3import { ProductGrid } from './ProductGrid';
4import { getProducts } from '@/lib/db';
5
6export default async function ProductsPage() {
7  const products = await getProducts();
8  
9  return (
10    <main>
11      <h1>Ürünler</h1>
12      <ProductGrid products={products} />
13    </main>
14  );
15}
16
17// ProductGrid.tsx (Client)
18"use client";
19
20interface Props {
21  products: Product[];
22}
23
24export function ProductGrid({ products }: Props) {
25  const [filter, setFilter] = useState('all');
26  
27  const filtered = products.filter(p => 
28    filter === 'all' || p.category === filter
29  );
30  
31  return (
32    <>
33      <FilterBar value={filter} onChange={setFilter} />
34      <div className="grid">
35        {filtered.map(p => (
36          <ProductCard key={p.id} product={p} />
37        ))}
38      </div>
39    </>
40  );
41}