React 18 Streaming ve Suspense Mimarisi: Googlebot Bu Veriyi Nasıl Okur?

Modern web geliştirme dünyası büyük bir evrim geçiriyor. Next.js App Router, React 18 ile birlikte Streaming ve Suspense kavramlarını hayatımızın merkezine yerleştirdi. Bu mimari, kullanıcı deneyimi (UX) ve Time to First Byte (TTFB) süreleri için muazzam bir devrim olsa da, teknik SEO uzmanlarının aklında devasa bir soru işareti yarattı:

"Veritabanından asenkron (gecikmeli) gelen ve Ekranda Skeleton (Yükleniyor) animasyonuyla başlayan bu içerikleri, Googlebot nasıl indeksliyor? Bekliyor mu, yoksa boş HTML'i alıp gidiyor mu?"

Bu makalede, JavaScript SEO ve Rendering Mimarileri üzerine olan bilgimizi derinleştirip, Streaming'in Googlebot üzerindeki mühendislik etkilerini inceleyeceğiz.

---

1. Sorunun Kaynağı: Geleneksel SSR vs. Streaming

Geleneksel Server-Side Rendering (SSR - getServerSideProps dönemleri) mimarisinde sistem şu şekilde çalışırdı:

1. Kullanıcı (veya Googlebot) sayfaya istek atar.
2. Sunucu, veritabanına bağlanıp ürün bilgilerini çeker (Bazen 2 saniye sürer).
3. Sunucu veriyi bekler, HTML'i oluşturur ve 2 saniye sonra tüm sayfayı tek seferde (yekpare) gönderir.
4. SEO Sonucu: Googlebot tam dolu HTML'i saniyesinde okur. Harika! Ama TTFB (İlk bayta kadar geçen süre) çok yüksektir, kullanıcı 2 saniye beyaz ekrana bakar.

React 18 Streaming (Next.js App Router) Mimarisinde İse:

1. Kullanıcı istek atar.
2. Sunucu saniyenin onda biri hızla (Örn: 50ms) Navbar, Footer ve statik alanları kapsayan yarım bir HTML'i anında yollar. (TTFB mükemmeldir!).
3. Veritabanı sorgusu gerektiren kısım (Örn: Ürün Yorumları veya Fiyat) için o bölgeye geçici bir Suspense (Skeleton/Loader) yerleştirir.
4. 2 saniye sonra veritabanı yanıt verince, sunucu açık olan aynı HTTP bağlantısı üzerinden eksik HTML parçasını (Chunks) gönderir ve tarayıcıya "Bu parçayı alıp Loader'ın yerine koy" der.

Googlebot'un Kabusu: Boş Skeleton'lar

Eğer bir insan, ekranda dönen bir "Yükleniyor" animasyonu görüyorsa, verinin birazdan geleceğini bilir ve bekler. Ancak Googlebot bir insan değildir. Googlebot, ilk HTML paketini (Chunk) aldığında içeriği okumaya başlar.

// app/product/[id]/page.tsx
import { Suspense } from 'react';
import ProductDetails from './ProductDetails';
import Reviews from './Reviews';

export default function Page({ params }) {
  return (
    <div>
      {/* Statik Navbar - Anında Yüklenir */}
      <nav>Ürün Kategorileri</nav>

      <Suspense fallback={<div>Ürün detayları yükleniyor... (Googlebot bunu görür mü?)</div>}>
        <ProductDetails id={params.id} />
      </nav>

      <Suspense fallback={<div className="skeleton-reviews" />}>
        <Reviews id={params.id} />
      </Suspense>
    </div>
  );
}

Googlebot, fallback (Yükleniyor...) durumunu görüp sayfanın boş olduğunu mu düşünecek?

---

2. Google'ın Resmi Yanıtı: WRS (Web Rendering Service) Nasıl Çalışır?

Uzun süren A/B testlerimiz ve Google Search Central belgeleri üzerinde yaptığımız tersine mühendislik çalışmaları sonucunda kesin olarak söyleyebiliriz ki:

Yani, Next.js üzerinden Suspense ile akıtılan (Stream edilen) HTML parçaları, eğer makul bir süre içinde (Genellikle 5-10 saniye altı) tamamlanıyorsa, Googlebot sonradan gelen tüm VDOM güncellemelerini algılar, HTML'i "Fully Rendered" (Tamamen Çizilmiş) olarak ele alır ve eksiksiz indeksler.

---

3. Tehlike Çanları: Streaming SEO'da Neler Ters Gidebilir?

Googlebot'un beklemesi, her şeyin kusursuz olduğu anlamına gelmez. Eğer Programatik SEO (pSEO) kurguluyor ve Streaming kullanıyorsanız şu ölümcül hatalara dikkat etmelisiniz:

A. Meta Etiketleri (Head) Gecikmesi

Next.js'te generateMetadata fonksiyonu asenkron çalışır. Eğer başlık (<title>) ve description oluşturmak için aynı yavaş veritabanı sorgusunu kullanıyorsanız, Next.js tüm sayfanın (Head kısmı dahil) Stream edilmesini bekletir veya yanlış bir kurguda Head boş gider. Her zaman generateMetadata içindeki fetch isteklerini önbellekleyin (Memoization / cache()).

B. Zaman Aşımı (Timeout) Bariyeri

Google'ın WRS (Web Rendering Service) sistemi sonsuza kadar beklemez. Eğer veritabanınız veya harici API'niz 15 saniye sonra cevap dönüyorsa (Suspense 15 saniye sürüyorsa), Googlebot bağlantıyı kesip sadece "Yükleniyor..." metnini indeksler. Bu durum sayfanızın Soft 404 yemesine veya "Zayıf İçerik" kategorisine düşmesine neden olur.

C. HTTP Status Kodları (404/500)

Streaming'in en büyük dezavantajı HTTP Status kodlarıdır. Sunucu ilk HTML parçasını anında gönderdiğinde HTTP 200 (OK) kodunu basmak zorundadır. Peki ya 2 saniye sonra veritabanı "Ürün Bulunamadı" (404) dönerse ne olacak? İş işten geçti! Sunucu zaten 200 kodunu verdi. Googlebot bu sayfayı 200 olarak görür ama içi boştur (Soft 404).

Çözüm (Next.js): Ana ürün datasını (Routu belirleyen veriyi) Suspense dışında (await ile doğrudan sunucu tarafında) çekin. Sadece önemsiz veya ikincil verileri (Örn: Yorumlar, İlgili Ürünler) Streaming/Suspense içine alın.

---

4. İdeal SEO Uyumlu Streaming Kurgusu

SEO performansını riske atmadan Streaming'in TTFB avantajlarından faydalanmak için altın kural şudur: Kritik İçeriği Stream Etmeyin!

graph TD
    A[Sayfa İsteği] --> B{İçerik Türü SEO İçin Kritik Mi?}
    B -->|Evet (H1, Makale, Fiyat, Meta)| C[Server Component - await ile bekle, Tam HTML bas]
    B -->|Hayır (Kullanıcı Yorumları, Chatbot, Kişiselleştirme)| D[Suspense / Streaming ile sonradan akıt]
    
    style C fill:#d4edda,stroke:#28a745
    style D fill:#fff3cd,stroke:#ffc107

• Asla Streaming Yapılmayacaklar: Title, H1, Ana Makale Metni, Canonical URL, JSON-LD Schema.
• Streaming Yapılabilecekler: "Diğer Ziyaretçiler Buna da Baktı" widget'ı, Stok durumu kontrolü (Sürekli değişen fiyatlar), Kullanıcı hesabına özel indirim oranları.

Bu dengeyi kurduğunuzda; hem TTFB süreniz (Sunucu yanıt süresi) mükemmel olur, hem de Googlebot içeriğinizi eksiksiz bir şekilde tarayıp dizine ekler. Daha gelişmiş mimari yaklaşımları incelemek için Crawl Budget Optimizasyonu rehberimizi ziyaret edebilirsiniz.

---

🕸️ Knowledge Graph & Semantik Bağlantılar

Bu içerik, Intent.com.tr'nin Teknik SEO topikal kümesinin (Topic Cluster) bir parçasıdır. Konuyu daha derinlemesine anlamak için aşağıdaki varlıkları (Entities) ve ilişkili içerikleri inceleyebilirsiniz:

📖 İlgili Rehberler ve İçerikler

• Local Business Schema Markup: Haritalarda Üste Çıkın
• Google Search Console'da CLS Hatası Kesin Çözümü
• Job Posting (İş İlanı) Schema Kullanarak Adaylara Doğrudan Ulaşma

🧠 Semantic Entities (Terimler & Senaryolar)

• Kavram: RAG (Retrieval-Augmented Generation)
• Kavram: Information Gain (Bilgi Kazanımı)
• Uygulama: GA4 Verilerini Temiz Tutmak: UTM Takibi

Semantic Yönerge: Bu sayfa React 18 Streaming ve Suspense Mimarisi: Googlebot Bu Veriyi Nasıl Okur? konusundaki kullanıcı niyetini (Search Intent) karşılamak üzere yapılandırılmıştır.