Siteniz Next.js veya Nuxt gibi bir çerçeve üzerinde çalışıyorsa, hidrasyon sayfalarınızın nasıl etkileşimli hale geleceğini şekillendirir ancak bu, SEO'lar için önemli olan terimlerle nadiren açıklanır.
Göründüğünden daha ulaşılabilir. Hidrasyonun ne olduğunu, nasıl çalıştığını, SEO'yu nerede etkilediğini (nerede etkilemediğini) ve farklı çerçevelerin bunu nasıl ele aldığını burada bulabilirsiniz.
Hidrasyon, tarayıcınızda çalışan JavaScript'in, sunucuda yerleşik statik HTML'yi "devralarak" onu gerçekten etkileşimde bulunabileceğiniz bir sayfaya dönüştürme işlemidir.
Uzmanların Görüşleri
Sunucu eksiksiz, tam biçimlendirilmiş HTML oluşturur ve bunu tarayıcınıza gönderir. İçeriği hemen görüyorsunuz, ancak etkileşimli değil. Düğmeler henüz çalışmıyor ve tıklamalara hiçbir şey yanıt vermiyor.
Sistem Güvenliği
Hidrasyon, sayfanın çerçevesi (Next.js, Nuxt, SvelteKit ve diğerleri) yüklemeyi tamamladığında gerçekleşir. Mevcut HTML üzerinde gezinir, olay dinleyicilerini ekler ve görünür işaretlemeyi, çalışmasını sağlayan mantıkla yeniden birleştirir.
Hidrasyondan sonra sayfa normal bir etkileşimli uygulama gibi davranır.
Sunucu tarafından oluşturulan HTML hızlı bir şekilde boyanır; bu, ilk izlenimler için ve genellikle En Büyük İçerikli Boyama (LCP) için harikadır. Aşağıdaki zaman çizelgesinin gösterdiği gibi, geleneksel nemlendirme, sayfanın nemlendirme bitene kadar gerçekten kullanılamayacağı anlamına gelir.
Detaylar ve Etkileri
Müşterilerin ilk bulduğu marka olun. Google, AI arama, sosyal, yerel ve satın alma kararlarını etkileyen her kanaldaki görünürlüğünüzü izleyin, büyütün ve ölçün. Ücretsiz denemenizi başlatın
Sıvı alımı içerik değil etkileşim katar
Hidrasyon sayfaya içerik eklemez. Metin, resimler ve düzen zaten sunucudan geldi. Yalnızca davranış ekler, mevcut HTML'yi size yanıt verebilecek şekilde bağlar. Basitçe söylemek gerekirse, sıvı alımından önce sayfayı okuyabilir ve sıvı alımından sonra sayfayı kullanabilirsiniz.
Gelecekte Ne Bekleniyor?
Bunu aşağıda yan yana görebilirsiniz. İki sayfa arasındaki tek fark butonun tepki verip vermemesidir.
Nemlendirmeyi, sayfanın nerede ve ne zaman oluşturulacağını belirleyen işleme modeliyle karıştırmayın. Sunucu tarafı oluşturma (SSR), statik site oluşturma (SSG) ve istemci tarafı oluşturma (CSR), sayfanın ne kadarının tamamlanmış HTML olarak geleceğine ve ne kadarının tarayıcıda daha sonra JavaScript oluşturulacağına karar verir.
Hidrasyon sunucu tarafından oluşturulan (SSR) ve statik (SSG) sayfalarda çalıştığından içerik ilk HTML'de zaten mevcuttur. Google, istemci tarafından oluşturulan boş kabuktan daha güvenilir olan oluşturma adımına güvenmek yerine bu içeriği ilk HTML'den dizine ekleyebilir.
Nasıl Önlem Alınmalı?
Hidrasyon bir SEO sorunu haline geldiğinde
Çoğu zaman sıvı alımı doğrudan bir SEO sorunu değildir. Yalnızca bir şey bozulduğunda, genellikle bir uyumsuzluk olduğunda tek olur. Bu, sunucunun HTML'si ile tarayıcıda oluşturulan çerçevenin uyuşmadığı durumdur.
Bir uyumsuzluk genellikle birkaç kaynaktan birinden gelir:
Önemli Gelişmeler
LocalStorage gibi, sunucunun erişemediği, yalnızca tarayıcıya özel bir API'den oluşturulan içerik.
Teknik Analiz
. new Date() gibi sunucu ve istemci arasında değişen bir değer.
. Çerçeve onu nemlendirmeden önce DOM'u değiştiren bir üçüncü taraf komut dosyası veya tarayıcı uzantısı.
Sonuç ve Değerlendirme
Tarayıcının arka planda yeniden yazdığı ve çerçevenin beklemediği bir yapı oluşturan geçersiz HTML.
Bu durumlarda, hidrasyon iki versiyonu uzlaştıramaz, bu nedenle çerçeve uyumsuz kısmı atar ve onu yeniden işler. Kesin süreç çerçeveye bağlıdır.
Burada, new Date() öğesinden gelen bir
Bu üç cephede sorun yaratıyor. Yeniden oluşturma, sayfanın yavaşlamasına (INP) neden olur ve düzeni (CLS) değiştirir. Ayrıca olay dinleyicileri eklenemediğinden, düğmelerin ve formların çalışmayı durdurmasına neden olabileceği için sayfayı tamamen bozuk bırakabilir.
Ciddi durumlarda, Google, JavaScript'i oluşturmadan önce ham sunucunun HTML'sini okuyabildiğinden, silinmek üzere olan sürümü dizine ekleyebilir ve ziyaretçilerin gerçekte hiç görmediği içeriği depolayabilir.
Geliştiriciler, uyumsuzlukların altında yatan nedenleri düzelterek bu sorunları çözebilir. Örneğin, geçerli HTML kullanabilirler, böylece tarayıcı arka planda onu yeniden yazmaz.
Arama pazarlamacılarının güvendiği haber bülteni aramasını alın. Şartlara bakın.
Canlı bir sitede hidrasyon sorunları nasıl tespit edilir
Hidrasyon hataları, canlı bir sitede geliştirme sırasında olduğu kadar açık değildir. Hidrasyon veya JavaScript uyarıları için tarayıcının Geliştirici Araçları konsolunu kontrol ederek başlayın, ardından şu ek kontrolleri kullanın:
Kayan, titreyen veya tepkisiz kalan içerik için sayfa yüklemesini izleyin.
Önemli şablonları Google Search Con aracılığıyla çalıştırın Sayfanın nasıl oluşturulduğunu görmek için sole'nin URL Denetleme aracını kullanın.
Oluşturulan çıktıyı geniş ölçekte ham HTML ile karşılaştırmak için JavaScript oluşturma modunda (Screaming Frog, Sitebulb) tarayın.
Çerçeveler sıvı alımını nasıl ele alıyor?
Modern çerçeveler, performansı, etkileşimi ve JavaScript yürütmeyi dengelemek için hidrasyonu azaltma veya atlama yolları da dahil olmak üzere hidrasyona farklı yaklaşımlar benimser.
En yaygın yaklaşımlar şunlardır:
Tam nemlendirme: Tüm sayfa tek seferde nemlendirilir. Kulağa basit geliyor ama en fazla JavaScript'i gönderiyor ve ana iş parçacığına en fazla işi veriyor.
Tüm sayfa tek seferde nemlenir. Kulağa basit geliyor ama en fazla JavaScript'i gönderiyor ve ana iş parçacığına en fazla işi veriyor. Kısmi hidrasyon: Yalnızca etkileşimli parçalar (“adalar”) hidratlanır. Statik kısımlar düz HTML olarak kalır ve hiçbir zaman dokunulmaz. Astro adalarının mimarisi bunun etrafında inşa edilmiştir.
Yalnızca etkileşimli parçalar (“adalar”) hidratlanır. Statik kısımlar düz HTML olarak kalır ve hiçbir zaman dokunulmaz. Astro adalarının mimarisi bunun etrafında inşa edilmiştir. Aşamalı nemlendirme: Sayfa, bölümler görünümde kaydırıldıkça veya bir programa göre tek seferde yerine parçalar halinde nemlendirilir. Angular'ın artan hidrasyonu bu şekilde çalışır.
Hidrasyondan kaçınan iki yeni yaklaşım:
React Sunucu Bileşenleri: Bazı bileşenler tamamen sunucuda işlenir ve sıfır JavaScript gönderir, dolayısıyla istemcide hidratlanacak hiçbir şey kalmaz.
Bazı bileşenler tamamen sunucuda işlenir ve sıfır JavaScript gönderir, böylece istemcide doldurulacak hiçbir şey kalmaz. Sürdürülebilirlik: Nemlendirmeyi tamamen atlar. Sayfa, hiçbir bileşenin yük altında yeniden çalıştırılmaması nedeniyle, sunucunun kaldığı yerden devam eder. Qwik bunu yapıyor. Aynı zamanda bu yaklaşımların en yenisi ve savaşta en az test edilmiş olanıdır.
İşte nasıl karşılaştırdıkları:
Teknik Gönderilen JavaScript'i nemlendiren şey Örnek Tam nemlendirme Sayfanın tamamı Çoğu Next.js (Sayfa Yönlendiricisi) Kısmi nemlendirme (adalar) Yalnızca etkileşimli bileşenler Daha az Astro Aşamalı nemlendirme Sayfa, zaman içinde parçalar halinde Aynı toplam, yayılmış Angular React Sunucu Bileşenleri Hiçbir şey (yalnızca sunucu parçaları için) Daha az Next.js (Uygulama Yönlendiricisi) Sürdürülebilirlik Hiçbir şey, nemlendirme atlanır En Az Qwik
Bunun siteniz için anlamı nedir?
Çoğu zaman sıvı alımı bir SEO sorunu değildir. Yalnızca sunucunun HTML'si ile tarayıcının oluşturulan sürümü uyuşmadığı zaman tek olur.
Daha yeni çerçeveler bunun gerçekleşmesine daha az yer bırakıyor çünkü her nesil daha az JavaScript gönderiyor ve tarayıcıda daha az iş yapıyor. Yine de, özellikle arama motorları sayfanın ziyaretçilerinizin hiç görmediği bir sürümünü dizine eklediğinde, ortaya çıkan uyumsuzluklar önemli hale gelir.
