Ulaşım
- Adres:Batıkent Mh. 8910 Sk. 6. Etap 1H No: 18 Yeni Toki Eyyübiye / Şanlıurfa (Yeni Alım Satım Karşısı)
- Telefon:0 (545) 528 88 93
- eMail: info@alestaweb.com
React Server Components (RSC) 2025'te frontend dünyasında devrim yaratıyor! Sunucuda çalışan React komponentleri (server-rendered React components), performansı artırıyor ve bundle size'ı küçültüyor. Alesta Web olarak bu yeni teknolojiy detaylıca inceledik. Hadi birlikte öğrenelim!
React Server Components, sadece sunucuda çalışan React komponentleridir (React components that run exclusively on the server). 2020'de React team tarafından tanıtıldı ve 2025'te Next.js ile yaygınlaşıyor.
RSC, istemciye (browser) JavaScript göndermeden HTML render eden komponentler (components that render HTML without sending JavaScript to the browser). Alesta Web ekibi olarak RSC'nin performans avantajlarını test ettik!
| Özellik / Feature | Geleneksel React (Client) | Server Components (RSC) |
|---|---|---|
| Çalışma Yeri / Execution | Browser (istemci) | Server (sunucu) |
| JavaScript Bundle | İstemciye gönderilir (sent to client) | GÖNDERİLMEZ! (NOT sent!) |
| State/Hooks | useState, useEffect kullanabilir | KULLANAMAZ (cannot use) |
| Database Erişimi | API ile dolaylı (via API) | DİREKT erişebilir! (direct access) |
alestaweb.com araştırmalarına göre, RSC'nin 3 büyük avantajı var:
Alesta Web testi: RSC ile bundle size %40 küçüldü (bundle size reduced by 40%)!
// ❌ Geleneksel React (API gerekir)
async function ProductPage() {
const res = await fetch('/api/products');
const data = await res.json();
return <div>{data.name}</div>;
}
// ✅ Server Component (Direkt database!)
async function ProductPage() {
const product = await db.products.findById(123);
return <div>{product.name}</div>;
}
API endpoint'e gerek yok! (No need for API endpoints!)
Sunucuda render edildiği için Google bot'ları içeriği direkt görür (Google bots see content directly). alestaweb.com deneyimlerimize göre, RSC ile SEO skoru artıyor (SEO score improves with RSC)!
Alesta Web olarak basit bir örnek hazırladık:
// Bu bir Server Component (default)
// 'use client' direktifi YOK
import { db } from '@/lib/database';
export default async function ProductsPage() {
// Direkt database sorgusu!
const products = await db.products.findMany();
return (
<div>
<h1>Ürünler / Products</h1>
<ul>
{products.map(product => (
<li key={product.id}>{product.name}</li>
))}
</ul>
</div>
);
}
✅ Bu komponent sunucuda çalışır, JavaScript istemciye GÖNDERİLMEZ!
'use client' // ← Bu direktif ile Client Component olur!
import { useState } from 'react';
export default function AddToCartButton({ productId }) {
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 ? 'Ekleniyor...' : 'Sepete Ekle'}
</button>
);
}
✅ Bu komponent istemcide çalışır, interaktif olabilir!
import { db } from '@/lib/database';
import AddToCartButton from '@/components/AddToCartButton'; // Client Component
export default async function ProductsPage() {
const products = await db.products.findMany();
return (
<div>
<h1>Ürünler</h1>
{products.map(product => (
<div key={product.id}>
<h2>{product.name}</h2>
<p>{product.price} TL</p>
{/* Client Component içinde! */}
<AddToCartButton productId={product.id} />
</div>
))}
</div>
);
}
Alesta Web İpucu: Server Component içinde Client Component kullanabilirsiniz, ama tersi OLMAZ! (you can use Client Component inside Server Component, but not vice versa!)
Next.js 15 (2025), React Server Components'i varsayılan olarak kullanıyor (uses RSC by default). alestaweb.com kurulum rehberi:
npx create-next-app@latest my-app # Veya Bun ile (or with Bun): bun create next-app my-app cd my-app npm run dev
Next.js 15'te app/ dizinindeki tüm komponentler varsayılan olarak Server Component'tir (all components in app/ are Server Components by default).
// app/page.tsx
// Bu bir Server Component (otomatik)
export default function HomePage() {
return <h1>Merhaba Alesta Web!</h1>;
}
İnteraktif komponent gerekiyorsa 'use client' ekle:
'use client'
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
Alesta Web Tavsiyesi: 2025'te yeni Next.js projeleri için RSC kullanın, ama eski projelerde acele etmeyin (use RSC for new Next.js projects, but don't rush in legacy projects).
Aralık 2025'te React Server Components'te kritik bir güvenlik açığı keşfedildi: CVE-2025-55182 (CVSS 10.0 - Critical!). Bu açık, Flight protokolünde RCE (Remote Code Execution) saldırılarına izin veriyor.
# Güncelleme komutu (Update command): npm update react react-dom next # Veya (or): bun update react react-dom next
alestaweb.com olarak güvenlik güncellemelerini yakından takip ediyoruz. Production'da RSC kullanıyorsanız mutlaka güncelleyin! (if you use RSC in production, update immediately!)
Bu makalede kullanılan bilgiler aşağıdaki güvenilir kaynaklardan alınmıştır:
Alesta Web olarak tüm bilgileri doğruladık ve test ettik.
React Server Components, 2025'te frontend geliştirmenin geleceğini şekillendiriyor (shaping the future of frontend development). Alesta Web olarak bu teknolojinin performans ve SEO avantajlarını test ettik ve onaylıyoruz!
Hızlı Özet / Quick Summary:
2025'te yeni projeler için RSC kullanın (use RSC for new projects in 2025). Ama her şeyi Server Component yapmayın - sadece gerekli yerlerde kullanın (but don't make everything a Server Component - use only where needed). İnteraktif komponentler için Client Component kullanmaya devam edin!
Faydalı Linkler / Useful Links:
React Server Components hakkında sorularınız varsa, alestaweb.com üzerinden bizimle iletişime geçebilirsiniz!
© 2025 AlestaWeb - Tüm hakları saklıdır. / All rights reserved.