React ile yapılan site Google'da çıkar mı? CSR, SSR, SSG ve prerender farkı

Evet, React ile yapılan bir site Google'da çıkabilir; ancak sayfaların nasıl render edildiği belirleyicidir. Yalnızca istemci tarafında (CSR) çalışan bir React sitesinde Googlebot önce neredeyse boş bir HTML görür ve içeriği ertelenmiş bir render kuyruğunda işler. SSR, SSG veya prerender ile sayfaları hazır HTML olarak sunmak indekslenme riskini büyük ölçüde ortadan kaldırır.

React SPA'lar neden indekslenme sorunu yaşar?

React SPA'lar, yani tek sayfalı React uygulamaları, sunucudan genellikle yalnızca boş bir kök div ve bir JavaScript paketi gönderir. Başlık, metin ve bağlantılar ancak JavaScript tarayıcıda çalıştıktan sonra oluşur. Arama motoru botu sayfanın ham HTML'ine baktığında içerik yoktur; bu da React SPA'larda indekslenmenin gecikmesine veya eksik kalmasına yol açar.

Sorun yalnızca Google ile sınırlı değil. Bing JavaScript'i daha sınırlı işler; ChatGPT ve Perplexity gibi yapay zeka yanıt motorlarının tarayıcılarının önemli bir kısmı ve WhatsApp, LinkedIn, X gibi platformların bağlantı önizleme botları JavaScript'i hiç çalıştırmaz. Bu botlar için saf CSR bir React sitesi, başlığı ve açıklaması olmayan boş bir sayfadır. Yani konu artık yalnızca SEO değil, AEO (yanıt motoru optimizasyonu) meselesidir.

• —Search Console'da sayfaların uzun süre 'Tarandı - şu anda dizine eklenmedi' durumunda kalması.
• —Google sonuçlarında sayfa başlığı yerine alan adının ya da tüm sayfalarda aynı başlığın görünmesi.
• —Paylaşılan bağlantılarda önizleme görselinin ve açıklamanın çıkmaması.
• —Yeni eklenen sayfaların haftalarca indekse girmemesi.

Googlebot JavaScript'i nasıl render eder?

Googlebot, JavaScript'i Chromium'un güncel (evergreen) bir sürümüyle render eder, ancak bu işlem taramayla aynı anda değil, ertelenmiş bir kuyrukta gerçekleşir. Googlebot önce ham HTML'i tarar ve oradaki bağlantıları keşfeder; ardından sayfa, kaynak uygun olduğunda render kuyruğuna alınır. Bu gecikme çoğu sayfada kısa olsa da garanti edilmez.

SEO camiasında bu süreç uzun süre 'iki dalgalı indeksleme' olarak anıldı. Google bugün render gecikmesinin çoğu sayfa için dakikalar mertebesinde olduğunu söylüyor, fakat büyük ve düşük otoriteli sitelerde bu süre uzayabiliyor. Ayrıca render sırasında zaman aşımına uğrayan API çağrıları, robots.txt ile engellenmiş JavaScript dosyaları ve yalnızca tıklama veya kaydırmayla yüklenen içerik hiç görülmeyebilir. Bağlantıların gerçek a etiketi ve href yerine onClick ile yönlendirilmesi de sayfa keşfini zorlaştırır.

CSR, SSR, SSG ve prerender arasındaki fark nedir?

CSR, SSR, SSG ve prerender arasındaki temel fark, HTML'in nerede ve ne zaman üretildiğidir. CSR'da HTML tarayıcıda, SSR'da her istekte sunucuda, SSG'de derleme (build) sırasında bir kez üretilir. Prerender ise mevcut bir React SPA'nın rotalarını build sırasında render edip statik HTML dosyalarına dönüştürme yöntemidir.

• —CSR (Client-Side Rendering): Sunucu boş bir kabuk gönderir, içerik tarayıcıda oluşur. Geliştirmesi en basit yöntemdir; SEO ve ilk yükleme hızı açısından en zayıf seçenektir.
• —SSR (Server-Side Rendering): Her istekte sunucu HTML üretir. Kişiye özel veya sık değişen içerik için idealdir; ancak sürekli çalışan bir Node.js sunucusu ve daha fazla altyapı maliyeti gerektirir.
• —SSG (Static Site Generation): Tüm sayfalar build sırasında statik HTML olarak üretilir. En hızlı ve en ucuz barındırma seçeneğidir; içerik değiştiğinde yeniden build gerekir.
• —Prerender: SSG'nin mevcut bir React SPA'ya sonradan uygulanmış hâlidir. Rotalar build anında render edilir, sonra tarayıcıda hydrate edilir. Framework değiştirmeden SEO sorununu çözer.
• —Hibrit yaklaşımlar (ISR gibi): Next.js benzeri framework'lerin sunduğu, statik sayfaları belirli aralıklarla arka planda yenileyen karma çözümler.

Kurumsal siteler, hizmet sayfaları ve bloglar gibi içeriği günde birkaç kez değişmeyen projelerde SSG veya prerender genellikle en mantıklı tercihtir. Kullanıcıya özel panel, anlık stok veya fiyat gösteren sayfalarda SSR ya da CSR ile API birleşimi daha uygundur. Gerçek projelerin çoğunda bu yaklaşımlar karışık kullanılır: pazarlama sayfaları statik, uygulama paneli istemci taraflı.

Next.js'e geçmeden Vite + React sitesinde prerender nasıl yapılır?

Vite + React sitesinde prerender, uygulamayı hem tarayıcı hem Node için derleyip her rotayı build sırasında renderToString ile HTML'e çevirerek yapılır. Next.js'e geçmek şart değildir; Vite'ın SSR build modu, küçük bir Node betiği ve bir rota listesiyle aynı sonuç elde edilir. 404 Ajans'ın kendi sitesi tam olarak bu yöntemle çalışıyor.

Kendi sitemizde (React 18 + Vite) izlediğimiz akış şu adımlardan oluşuyor:

• —Rotalar iki giriş dosyasında tanımlanır: tarayıcı için istemci girişi (main.jsx) ve Node için sunucu girişi (entry-server.jsx). İki liste birebir aynı tutulur.
• —Sunucu girişi, tüm URL'leri (Türkçe sürümler ve /en altındaki İngilizce sürümler dahil) içerik veri dizilerinden üreten bir fonksiyon dışa aktarır.
• —Build üç aşamada çalışır: önce istemci paketi, ardından vite build --ssr ile Node'da çalışabilen sunucu paketi, son olarak prerender betiği.
• —Prerender betiği her rota için uygulamayı sunucu tarafı router içinde renderToString ile render eder ve çıkan HTML'i index.html şablonundaki kök div'e yerleştirir.
• —Her rotaya özel title, meta description, canonical, hreflang ve JSON-LD etiketleri tek bir veri fonksiyonundan üretilip head bölümüne yazılır.
• —Her URL için dist klasöründe ayrı bir index.html kaydedilir; sitemap.xml ve llms.txt de aynı veri dizisinden otomatik üretilir.
• —Tarayıcıda main.jsx, kök öğede hazır HTML varsa hydrateRoot, yoksa (geliştirme modunda) createRoot çağırır.

Bu yaklaşımın kritik noktası, sunucu ile tarayıcının aynı HTML'i üretmesidir. window, localStorage veya o anki saat gibi yalnızca tarayıcıda anlamlı değerler render sırasında kullanılırsa hydration uyumsuzluğu uyarıları çıkar; bu tür kodlar useEffect içine alınmalıdır. Head etiketleri için de iki tarafta aynı veri oluşturucu fonksiyonu kullanmak tutarsızlığı önler. Bizim deneyimimizde react-helmet-async bu kurulumda head etiketlerini güvenilir biçimde üretmedi; bu yüzden küçük, özel bir head yöneticisi yazdık.

Prerender'ın doğru çalıştığı nasıl test edilir?

Prerender'ın doğru çalıştığını test etmenin en hızlı yolu, sayfanın ham HTML kaynağını incelemektir. Tarayıcıdaki 'sayfa kaynağını görüntüle' ekranında başlık, gövde metni ve bağlantılar görünüyorsa JavaScript çalıştırmayan botlar da görüyordur. Ardından Search Console'daki URL Denetleme aracıyla Google'ın render ettiği HTML kontrol edilmelidir.

• —curl ile sayfayı çekip içinde H1 ve gövde metninin bulunduğunu doğrulayın.
• —Her sayfanın title ve canonical etiketinin kendine özgü olduğunu kontrol edin.
• —Search Console URL Denetleme ile canlı testi çalıştırın.
• —Rich Results Test ile JSON-LD'nin ham HTML içinde okunduğunu doğrulayın.
• —Tarayıcı konsolunda hydration uyarısı olup olmadığına bakın.
• —Sunucunun var olmayan yollar için doğru yedek sayfayı döndürdüğünü test edin.

Özetle React, SEO için bir engel değildir; engel, içeriği yalnızca tarayıcıda üretmektir. Mevcut bir Vite projesini baştan yazmak yerine prerender eklemek, çoğu kurumsal site için framework göçünden çok daha düşük riskli bir adımdır.