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 nedir?
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.
İşte süreç:
- 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.
- 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.
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.
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.
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)diye soruyorlar.Statik site oluşturma (SSG), ve istemci tarafı oluşturma (CSR)her biri sayfanın ne kadarının bitmiş HTML olarak geleceğine ve tarayıcıda daha sonra ne kadar 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 bu içeriği ilk HTML'den dizine ekleyebiliroluşturma adımına güvenmek yerineistemci tarafından oluşturulan boş bir kabuktan daha güvenilirdir.
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 kırıldığında tek olur,genellikle bir uyumsuzluk. Bu, sunucunun HTML'si ile tarayıcıda oluşturulan çerçevenin uyuşmadığı durumdur.
Bir uyumsuzluk genellikle birkaç kaynaktan birinden gelir:
- Sunucunun erişemediği, yalnızca tarayıcıya özel bir API'den oluşturulan içerik (ör.
yerelDepolama. - Sunucu ve istemci arasında değişen bir değer, örneğin
yeni Tarih(). - Çerçeve onu nemlendirmeden önce DOM'u değiştiren bir üçüncü taraf komut dosyası veya tarayıcı uzantısı.
- 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 birTarih()sunucuda ve tarayıcıda farklı şekilde işlenir ve yeniden oluşturmaya zorlanır.
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.
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. Tarayıcıyı kontrol ederek başlayınGeliştirici Araçları konsoluHidrasyon veya JavaScript uyarıları için şu ek kontrolleri kullanın:
- Kayan, titreyen veya tepkisiz kalan içerik için sayfa yüklemesini izleyin.
- Sayfanın nasıl oluşturulduğunu görmek için önemli şablonları Google Search Console'un URL Denetleme aracı aracılığıyla çalıştırı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 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'laradalar mimarisibunun etrafında inşa edilmiştir.
- Aşamalı nemlendirme:Sayfa, bölümler görünüme kaydırıldıkça veya bir programa göre, hepsi bir kerede yerine parçalar halinde nemlenir. Açısalartan hidrasyonbu şekilde çalışır.
Hidrasyondan kaçınan iki yeni yaklaşım:
- React Sunucu Bileşenleri:Bazı bileşenlertamamen sunucuda oluşturve sıfır JavaScript gönderin, böylece istemcide nemlendirilecek hiçbir şey kalmaz.
- Devam ettirilebilirlik:BThidrasyonu 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 | Ne nemlendirir | JavaScript gönderildi | Örnek |
|---|---|---|---|
| Tam nemlendirme | Sayfanın tamamı | En | Next.js (Sayfa Yönlendiricisi) |
| Kısmi hidrasyon (adalar) | Yalnızca etkileşimli bileşenler | Az | Astro |
| Aşamalı nemlendirme | Sayfa zamanla parçalar halinde | Aynı toplam, yayılmış | Açısal |
| React Sunucu Bileşenleri | Hiçbir şey (yalnızca sunucuya özel parçalar için) | Az | Next.js (Uygulama Yönlendiricisi) |
| Devam ettirilebilirlik | Hiçbir şey, sıvı alımı atlandı | 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.
