React, SSR, SSG ve Teknik SEO

React ile geliştirilen bir web sitesinin arama motorlarında iyi görünmesi, büyük ölçüde sayfanın HTML’inin nerede ve ne zaman üretildiğine bağlıdır. Bu rehber; istemci tarafı render (CSR), sunucu tarafı render (SSR), statik üretim (SSG) ve artımlı yeniden üretim (ISR) yaklaşımlarını, Google’ın JavaScript’i nasıl işlediğini ve Next.js App Router’da doğru stratejinin nasıl seçileceğini anlatır.

Google JavaScript’i nasıl işler?

Google’ın dokümantasyonuna göre Googlebot JavaScript içeren sayfaları üç aşamada işler: tarama, render ve indeksleme. Sayfa önce taranır; JavaScript ile oluşan içerik için sayfa render kuyruğuna alınır ve kaynaklar uygun olduğunda tarayıcı motoruyla çalıştırılır. Bu nedenle yalnızca istemcide oluşan içerik indekslenebilir; ancak gecikme, hata ve kaynak sınırları riski taşır. Bağlantıların gerçek <a href> öğeleri olması, meta etiketlerin ve canonical’ın ilk HTML’de bulunması önerilir.

Dört rendering yaklaşımı

Next.js App Router’da karar nasıl verilir?

App Router’da bileşenler varsayılan olarak Server Component’tir: veri sunucuda çekilir, HTML sunucuda üretilir ve tarayıcıya yalnızca etkileşim için gereken JavaScript gönderilir. Etkileşim gerektiren parçalar "use client" ile istemci bileşeni olarak işaretlenir. Sayfanın statik mi dinamik mi olacağı, kullanılan veri kaynakları ve önbellek ayarlarıyla belirlenir. Güncel Next.js sürümlerinde önbelleğe alma kararları "use cache" yönergesi ve önbellek etiketleriyle daha ayrıntılı yönetilebilir; içerik güncellendiğinde ilgili etiket geçersiz kılınarak sayfa yenilenir.

Sayfa türüne göre öneri

• Kurumsal ve hizmet sayfaları: statik üretim; CMS’te değişiklik olduğunda ilgili sayfanın yeniden doğrulanması (on-demand revalidation).
• Ürün ve katalog sayfaları: statik üretim + etiket bazlı yenileme; stok gibi hızlı değişen veriler ayrı, küçük bir dinamik bileşende.
• Arama ve filtre sonuçları: indekslenmesi istenen kombinasyonlar sunucuda; sonsuz filtre kombinasyonları için canonical ve noindex kuralları.
• Kullanıcı paneli: SSR veya istemci; indekslenmez, robots ile korunur.

Teknik SEO kontrol listesi (React/Next.js)

1. Sayfa kaynağında (JavaScript kapalıyken) başlık, ana içerik ve iç bağlantılar görünüyor mu?
2. Her sayfanın benzersiz title, description ve canonical değeri sunucuda üretiliyor mu (Metadata API)?
3. Bağlantılar gerçek href içeriyor mu; yönlendirme yalnızca onClick ile mi yapılıyor?
4. 404 sayfaları gerçekten 404 durum kodu döndürüyor mu (soft-404 riski)?
5. Sitemap ve robots dinamik içerikle güncel mi?
6. Yapılandırılmış veri (JSON-LD) sunucu HTML’inde mi?
7. İstemciye gönderilen JavaScript boyutu ve INP değeri ölçülüyor mu?

Sık yapılan hatalar

En yaygın hata, bütün sayfayı bir istemci bileşeni yapıp veriyi tarayıcıda çekmektir; sayfa hızlı görünse de ilk HTML boş kalır. İkinci hata, her sayfayı SSR yapmaktır: içerik nadiren değişirken her istekte sunucu çalışır ve TTFB yükselir. Üçüncüsü, yeniden doğrulama tetikleyicilerinin kurulmamasıdır; editör içeriği değiştirir ama site eski içeriği göstermeye devam eder.

Sık sorulan sorular

Google JavaScript ile üretilen içeriği indeksler mi?

Evet; Googlebot JavaScript’i render eder. Ancak render ayrı bir aşamada ve kaynak sınırları içinde yapılır; içerik, bağlantılar ve meta verilerin sunucu HTML’inde bulunması en güvenilir yöntemdir. Diğer arama motorları ve sosyal medya önizlemeleri JavaScript’i her zaman çalıştırmaz.

ISR ile SSR arasındaki fark nedir?

SSR her istekte sayfayı sunucuda üretir. ISR sayfayı önceden üretip önbellekte tutar ve belirli süre veya bir olay sonrasında arka planda yeniler; böylece statik hız ile güncel içerik birleşir.

Client Component kullanmak SEO’yu bozar mı?

Client Component’ler de ilk yüklemede sunucuda HTML olarak render edilir; sorun, içeriğin yalnızca tarayıcıda veri çekildikten sonra oluşmasıdır. İçerik veri çekme işlemleri sunucu tarafında yapılmalıdır.

Performans boyutu için LCP, INP ve CLS rehberine, platform kararı için WordPress mi Next.js mi rehberine bakabilirsiniz. Projenizin rendering ve SEO mimarisini birlikte tasarlamak için React ve Next.js web uygulamaları hizmetimizi inceleyin.