Next.js 15 App Router & React Server Components ile E-Ticarette 0ms TTFB Performansı

Geçtiğimiz 10 yılda popülerleşen geleneksel Single Page Application (SPA) yaklaşımı e-ticaret için iki büyük yapısal felaket doğurdu:

1. Devasa JavaScript Paketleri (Bundle Bloat): Kullanıcı bir ürün sayfasına girdiğinde boş bir HTML ve 2.5 - 4.5 MB boyutunda sıkıştırılmış JavaScript dosyası indirir. Düşük bütçeli bir mobil işlemcide bu JS'in ayrıştırılması (parse & evaluate) 3 ila 6 saniye sürer; bu sürede müşteri beyaz ekran veya donuk skeleton görür.
2. Arama Motoru Sıralama Kaybı (SEO Deficit): Googlebot her ne kadar istemci taraflı JS çalıştırabilse de, iki aşamalı indeksleme (Two-wave indexing) nedeniyle siteniz haftalarca indekslenmeyebilir veya eksik içerikle puan kaybeder.

Stilmerce Storefront'u bu sorunu Next.js 15 ve React Server Components (RSC) ile kökünden çözmüştür. Ürün başlıkları, fiyatlar, açıklamalar ve Schema.org yapısal verileri sunucuda sıfır JavaScript yüküyle saf HTML olarak üretilir.

Bir ürün detay sayfasında verilerin gelme hızları birbirinden çok farklıdır:

• Hızlı Veriler (<15ms): Ürün Başlığı, Görsel URL'leri, Marka, Açıklama (Redis veya Edge Cache'ten anında gelir).
• Orta Hızlı Veriler (~80ms): Dinamik İndirimler, Kullanıcıya Özel Fiyatlandırma.
• Yavaş / Dış Bağımlılıklar (~400ms): Kargo firması API'sinden anlık desi/fiyat hesabı, yapay zeka destekli çapraz satış önerileri.

+-------------------------------------------------------------------------+
|                        STREAMING SSR ÇALIŞMA AKIŞI                      |
|                                                                         |
|  [Tarayıcı İsteği]                                                      |
|         │                                                               |
|         ▼ (15ms)                                                        |
|  [HTTP 200: İlk HTML Parçası (Kritik CSS + Başlık + Görseller)] ────────► Tarayıcıda Anında |
|         │                                                                 LCP Çizilir!       |
|         ▼ (85ms)                                                                             |
|  [Suspense Çözüldü: Dinamik Fiyat ve Varyant Seçici HTML'i] ────────────► Ekrana Entegre Olur|
|         │                                                                                    |
|         ▼ (380ms)                                                                            |
|  [Suspense Çözüldü: Kargo API & AI Tavsiye Bileşeni HTML'i] ────────────► Sayfa Tamamlanır   |
+-------------------------------------------------------------------------+

Kullanıcı yavaş kargo API'sinin yanıt vermesini beklemez; ürün başlığını ve görsellerini 0.3 saniyede görür ve incelemeye başlar.

Aşağıdaki Next.js 15 Server Component örneği, sayfanın nasıl kademeli olarak stream edildiğini gösterir:

// app/[locale]/products/[slug]/page.tsx
import { Suspense } from 'react';
import { getProductFastSnapshot, getDynamicShipping, getAiRecommendations } from '@/lib/api';

export default async function ProductPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  // 1. Kritik ürün verisini anında al (<10ms)
  const product = await getProductFastSnapshot(slug);

  return (
    <main className="product-page-container">
      {/* Anında Ekrana Çizilen Kritik Alanlar */}
      <ProductGallery images={product.images} />
      <ProductHeader title={product.title} price={product.basePrice} />

      {/* Dinamik ve Yavaş Alanlar Suspense ile Korumada */}
      <Suspense fallback={<ShippingRatesSkeleton />}>
        <AsyncShippingEstimator productId={product.id} />
      </Suspense>

      <Suspense fallback={<RelatedProductsSkeleton />}>
        <AsyncAiRecommendations categoryId={product.categoryId} />
      </Suspense>
    </main>
  );
}

Geleneksel zaman tabanlı (ISR - Incremental Static Regeneration) sistemlerde "sayfa 60 saniyede bir güncellensin" denir. Bu durum iki büyük risk taşır: Ya fiyat değiştiğinde müşteri 60 saniye boyunca eski fiyatı görür, ya da gereksiz sunucu kaynak tüketimi oluşur.

Stilmerce'in Next.js 15 önbellek stratejisi Etiket Tabanlı (Tag-Based) çalışır:

// Ürün verisini fetch ederken etiketle
const res = await fetch(`https://api.stilmerce.com/v1/products/${slug}`, {
  next: { tags: [`product:${slug}`, `category:${categoryId}`] },
});

// Admin panelinde ürün güncellendiğinde Webhook tetiklenir:
// revalidateTag(`product:${slug}`)
// Sadece ilgili ürünün önbelleği milisaniyede sıfırlanır, geri kalan tüm site statik kalır!

Mobil cihazlar üzerinde yapılan Chrome User Experience (CrUX) test sonuçları: