/* ── Blog Detail Styles ── */ .bd-layout { display: grid; grid-template-columns: 1fr 320px; gap: 32px; padding-top: 28px; } /* ── Article ── */ .bd-article { background: #fff; border-radius: 20px; border: 1px solid rgba(0,0,0,.04); box-shadow: 0 4px 24px rgba(0,0,0,.04); overflow: hidden; } .bd-article__img { width: 100%; max-height: 400px; object-fit: cover; } .bd-article__body { padding: 32px 36px; } .bd-article__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .bd-article__date { font-size: .78rem; font-weight: 600; color: #94a3b8; display: flex; align-items: center; gap: 5px; } .bd-article__date i { color: #027a94; } .bd-article__title { font-size: 1.75rem; font-weight: 800; color: #0a1628; line-height: 1.3; margin: 0 0 24px; letter-spacing: -0.5px; } .bd-article__content { font-size: 1rem; color: #334155; line-height: 1.85; } .bd-article__content p { margin: 0 0 18px; } .bd-article__content img { max-width: 100%; border-radius: 12px; margin: 12px 0; } .bd-article__content a { color: #027a94; font-weight: 600; } .bd-article__content h2, .bd-article__content h3 { color: #0a1628; margin: 28px 0 12px; } .bd-article__content code { background: #f1f5f9; padding: 2px 8px; border-radius: 6px; font-size: .9em; color: #027a94; } .bd-article__content pre { background: #0f172a; color: #e2e8f0; padding: 20px; border-radius: 14px; overflow-x: auto; font-size: .88rem; line-height: 1.7; } .bd-article__content pre code { background: transparent; color: inherit; padding: 0; } .bd-article__content blockquote { border-left: 4px solid #027a94; margin: 16px 0; padding: 12px 20px; background: rgba(2,122,148,.03); border-radius: 0 12px 12px 0; color: #475569; font-style: italic; } .bd-article__content ul, .bd-article__content ol { padding-left: 20px; margin: 0 0 18px; } .bd-article__content li { margin-bottom: 8px; } /* ── Divider ── */ .bd-divider { height: 1px; background: linear-gradient(90deg, transparent 0%, #e2e8f0 20%, #e2e8f0 80%, transparent 100%); margin: 32px 0; } /* ── Comments Section ── */ .bd-comments { padding: 0 36px 36px; } .bd-comments__title { font-size: 1.1rem; font-weight: 800; color: #0a1628; display: flex; align-items: center; gap: 8px; margin: 0 0 20px; } .bd-comments__title i { color: #027a94; } .bd-comment { display: flex; gap: 14px; padding: 16px; background: #f8fafc; border-radius: 14px; margin-bottom: 12px; border: 1px solid rgba(0,0,0,.03); } .bd-comment__avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #027a94, #01b0c1); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .9rem; flex-shrink: 0; } .bd-comment__body { flex: 1; min-width: 0; } .bd-comment__header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .bd-comment__name { font-weight: 700; color: #0a1628; text-decoration: none; font-size: .88rem; } .bd-comment__name:hover { color: #027a94; } .bd-comment__time { font-size: .75rem; color: #94a3b8; } .bd-comment__text { font-size: .88rem; color: #475569; line-height: 1.6; margin: 0; } .bd-comment__empty { text-align: center; padding: 20px; color: #94a3b8; font-size: .88rem; } /* ── Comment Form ── */ .bd-form { padding: 0 36px 36px; } .bd-form__title { font-size: 1.05rem; font-weight: 800; color: #0a1628; display: flex; align-items: center; gap: 8px; margin: 0 0 16px; } .bd-form__title i { color: #027a94; } .bd-form__textarea { width: 100%; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 16px; font-size: .9rem; color: #334155; resize: vertical; min-height: 100px; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; font-family: inherit; } .bd-form__textarea:focus { outline: none; border-color: #027a94; box-shadow: 0 0 0 3px rgba(2,122,148,.08); } .bd-form__submit { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 12px 28px; background: linear-gradient(135deg, #027a94, #01b0c1); color: #fff; border: none; border-radius: 12px; font-weight: 700; font-size: .9rem; cursor: pointer; transition: box-shadow .2s; } .bd-form__submit:hover { box-shadow: 0 6px 20px rgba(2,122,148,.3); } .bd-form__login { text-align: center; padding: 16px; color: #64748b; font-size: .88rem; } .bd-form__login a { color: #027a94; font-weight: 700; text-decoration: none; } .bd-form__login a:hover { text-decoration: underline; } /* ── Sidebar ── */ .bd-sidebar { position: sticky; top: 80px; } /* ── Responsive ── */ @media (max-width: 900px) { .bd-layout { grid-template-columns: 1fr; gap: 20px; } .bd-sidebar { position: static; } .bd-article__body { padding: 24px 20px; } .bd-article__title { font-size: 1.35rem; } .bd-comments { padding: 0 20px 24px; } .bd-form { padding: 0 20px 24px; } }
React Server Components ile Performans Devrimi
24 Jun 2025

React Server Components ile Performans Devrimi

React Server Components Nedir?

React Server Components, sunucu tarafında render edilen ve istemciye minimum JavaScript gönderilmesini sağlayan bir mimari modeldir. Bu sayede sayfa yüklenme süresi azalır, kullanıcı deneyimi gelişir ve uygulamanın genel performansı artar. Klasik React bileşenlerinden farkı, bu bileşenlerin tamamen sunucu tarafında çalışması ve istemciye yalnızca HTML çıktısının gitmesidir.

Bu yaklaşım, Next.js, Remix gibi framework’lerde daha sık kullanılmaya başlandı. Çünkü özellikle SEO açısından kritik olan sayfaların daha hızlı açılması, Google sıralamalarında ciddi avantaj sağlar.

Neden Önemlidir?

  • Performans Artışı: İstemciye daha az kod gönderildiği için uygulama daha hızlı yüklenir.

  • SEO Uyumluluğu: Sayfa içeriği sunucu tarafında hazırlandığı için arama motoru botları içeriği daha iyi analiz eder.

  • Geliştirici Deneyimi: Kodun hem istemci hem de sunucu arasında net bir şekilde ayrılması, bakım ve test süreçlerini kolaylaştırır.

  • Veri Güvenliği: Hassas veriler sunucuda işlenip sadece gerekli çıktılar gönderildiği için güvenlik açısından avantaj sağlar.

Kullanım Senaryoları

  • Blog sistemleri

  • E-ticaret ürün detay sayfaları

  • Dashboard ve yönetim panelleri

  • Eğitim platformları (kurs, modül, sınav sayfaları)

Nasıl Başlanır?

Eğer halihazırda Next.js kullanıyorsanız, app dizini altında server components desteği mevcuttur. Örneğin:

// Bu bir server component'tir
export default async function ProductList() {
const products = await fetch('https://api.example.com/products')
.then(res => res.json()); return ( <ul> {products.map(p => ( <li key={p.id}>{p.name}</li> ))} </ul> );
}

Gelecek Ne Getirecek?

2025 itibariyle birçok büyük şirket, React Server Components mimarisini yavaş yavaş ana yapıya entegre etmeye başladı. Bu da gösteriyor ki; yazılım geliştiricilerin, bu teknolojiye hâkim olmaları sadece bir artı değil, neredeyse bir gereklilik hâline geliyor.

React Server Components, modern frontend geliştirmede performans, güvenlik ve SEO açısından büyük avantajlar sunuyor. Henüz projelerinizde bu yapıyı kullanmadıysanız, küçük bir modül ile denemeye başlayabilir, farkı ilk elden gözlemleyebilirsiniz.

Yorumlar

Henüz yorum yapılmamış. İlk yorumu sen yap!