{"sections":[{"type":"intro","content":"Modern React/Next.js uygulamalarında en büyük zorluklardan biri, büyük veri setlerinin hızlı ve verimli bir şekilde işlenip kullanıcıya sunulmasıdır. Geleneksel yaklaşımlar (Client-Side Fetching veya tek Server-Side Render) genellikle şişkin bundle boyutlarına ve yavaş yükleme sürelerine yol açar.\n\nBu yazıda, Next.js 14+ mimarisini kullanarak React Server Components (RSC) ve Streaming teknolojilerini birleştirerek veri yoğun uygulamalarda performansı 3.5 saniyeden 800 ms'ye nasıl düşürdüğümü paylaşıyorum."},{"type":"section","title":"Problem: Geleneksel Yaklaşımların Sınırları","items":["❌ **Waterfall Problemi:** Bir bileşenin verisinin yüklenmesi, diğerinin yüklenmesini bekler.","❌ **Client Bundle Şişkinliği:** Sunucuda kalması gereken ağır kütüphaneler istemciye gönderilir.","❌ **Ağır Initial HTML:** Sunucuda tüm verinin gelmesi beklendiği için, ilk HTML geç oluşur."]},{"type":"section","title":"Mimari: Server Components (RSC) ve Streaming","content":"Next.js 14+ mimarisi, uygulamayı mantıksal olarak üçe ayırır: Server Components (Veri Çekme), Client Components (Etkileşim) ve Suspense Boundary (Köprü).","code":"// app/dashboard/page.tsx (Server Component)\nimport { fetchBigData, calculateMetrics } from '@/lib/data';\n\nasync function DashboardPage() {\n // Veritabanı sorgusu doğrudan burada, sunucuda yapılır.\n const allData = await fetchBigData(); \n const metrics = calculateMetrics(allData);\n\n return (\n // Server Component, Client Component'i render eder\n \n );\n}"},{"type":"section","title":"Streaming ve Suspense İle Parçalı Yükleme","content":"Streaming, kullanıcıya mümkün olan en kısa sürede bir şeyler göstermenin en etkili yoludur. `Suspense` sınırları, hangi bileşenlerin bekleyip hangilerinin hemen gönderileceğini tanımlar.","code":"// app/layout.tsx\nimport { Suspense } from 'react';\nimport Loading from './loading';\n\nfunction DashboardLayout({ children }) {\n return (\n

\n {/* Hızlı Parça: Hemen render edilir */}\n \n \n {/* Yavaş Parça: Veri yüklenene kadar Loading gösterilir */}\n

\n }>\n {children} \n \n

\n );\n}"},{"type":"section","title":"Sonuçlar ve Metrikler","content":"RSC ve Streaming mimarisi ile elde edilen somut sonuçlar:","items":["✅ **TTFB İyileşmesi:** İlk HTML'in hızlı gelmesi sayesinde kullanıcı hemen içerik görür.","✅ **Bundle Küçülmesi:** JS boyutu minimuma iner.","✅ **İyileşme Oranı:** İlk yükleme süresi 3500ms'den 800ms'ye düştü (%77 Azalma)."]},{"type":"section","title":"Key Takeaways","items":["✅ Veri çekmeyi sunucuda (RSC) yapın.","✅ Suspense kullanarak sayfayı stream edin.","✅ `use client` kullanımını minimize edin."]}]}