Next.js 15 App Router: Server Components ve Streaming SSR Derinlemesine İnceleme

Next.js 15, App Router ile birlikte React ekosisteminde paradigma değiştiren bir yapı sunuyor. Pages Router'dan App Router'a geçiş sadece bir routing değişikliği değil, aynı zamanda data fetching, caching ve component architecture açısından köklü bir dönüşüm demek.

React Server Components (RSC) Nedir?

React Server Components, sunucuda çalışan ve zero-bundle-size gönderen component'lerdir. Veritabanı sorguları, dosya sistemi erişimi veya API çağrıları gibi işlemleri sunucuda yaparak client'a sadece render edilmiş HTML ve minimal JavaScript gönderirler. Bu yaklaşım, initial page load süresini dramatik şekilde azaltır.

App Router vs Pages Router: Temel Farklar

App Router'da her dosya default olarak Server Component'tir. Client interactivity gerektiren component'ler ise explicit olarak 'use client' directive ile işaretlenmelidir. Bu ayrım, otomatik code splitting ve daha granular hydration sağlar.

Streaming ve Suspense

Next.js 15, React 18 Suspense boundary'lerini kullanarak page'in kritik olmayan kısımlarını stream eder. Bu, kullanıcının önce skeleton UI görmesini ve ardından veri yüklendikçe content'in gelmesini sağlar. Time to First Byte (TTFB) ve Largest Contentful Paint (LCP) metrikleri açısından kritik bir optimizasyondur.

Caching Stratejileri

App Router'da fetch cache, router cache ve segment cache olmak üzere üç seviyeli caching mekanizması bulunur. Her seviyenin revalidation stratejileri farklıdır ve doğru kullanıldığında statik site performansında dynamic content sunmak mümkün olur.