Seçici Hidrasyonla Aşamalı Hidrasyon

Seçmeli hidratasyon, React 18'in, tüm sayfanın JavaScript'inin indirilmesini beklemeden JavaScript kodları gelir gelmez bileşenleri hidratlamaya başlamasını sağlayan bir özelliğidir. Kodu bağımsız olarak bölünmüş her bölüm, hepsi aynı anda değil, kendi paketi yüklendikçe hidratlanır.

React 18'den önce hidratasyon "ya hep ya hiç" şeklindeydi — React, sayfanın herhangi bir bölümü etkileşimli hâle gelmeden önce tüm JavaScript'i indirmek ve ağacın tamamını hidratlamak zorundaydı. React 18 bu kısıtlamayı kaldırır: ağacın bölümleri, kodları ve verileri kullanılabilir hâle geldikçe bağımsız olarak hidratlanır.

Kullanıcı henüz hidratlanmamış bir Suspense sınırına tıklar veya onunla etkileşime girerse React, diğer bekleyen hidratasyon işlerinden önce o alt ağacın hidratlanmasına hemen öncelik verir. Bu, belge sırasına göre ilk sırada yer almasa bile kullanıcının kullanmaya çalıştığı öğenin önce etkileşimli hâle gelmesi anlamına gelir.

React.lazy'nin dinamik içe aktarmalar ve Suspense sınırlarıyla birleştirilmesi, kodu bölünmüş bileşenler için seçmeli hidratasyonu mümkün kılar. Tarayıcı önce ana JS paketini indirir ve kabuğu hemen hidratlar. Her geç yüklenen bileşen, kendi parçası indirildiğinde, tarayıcı bunları aşamalı olarak getirirken hidratlanır.

Sonuç olarak, ilk görüntü alanındaki içerik, görüntü alanının altındaki JavaScript henüz indirilmeden etkileşimli hâle gelir. Yorum akışı ve öneri bileşeni JavaScript parçalarını hâlâ yüklüyor olsa bile kullanıcı gezinmeyle ve öne çıkan bölümdeki CTA ile etkileşime girebilir.

Seçmeli hidratasyon, hidratasyon performansının temel ölçütü olan Toplam Engelleme Süresini (TBT) azaltır. Chrome DevTools Performans sekmesinde Uzun Görevler (50 ms'yi aşan görevler) kırmızı renkle vurgulanır. Seçmeli hidratasyondan önce tüm hidratasyon için 300 ms'lik tek bir Uzun Görev görebilirsiniz; sonrasında zamana yayılmış birkaç küçük görev görürsünüz.

Seçmeli hidratasyonu zayıflatan yanlış örüntü, tüm bileşenleri uygulamanızın en üstünde içe aktarmaktır: import Footer from './Footer'. Bu, tarayıcıyı herhangi bir hidratasyon başlamadan önce Footer kodunu indirmeye, ayrıştırmaya ve çalıştırmaya zorlar. Görüntü alanının altındaki bileşenlerin üst düzey içe aktarmalarını React.lazy ve dinamik içe aktarmalarla değiştirin.

İlk görüntü alanının altında görünen bileşenler için const Footer = React.lazy(() => import('./Footer')) kullanın. Bunları basit bir geri dönüş arayüzüyle Suspense içine sarmalayın. Tarayıcı, Footer paketini getirmeye ilk görüntü alanındaki hidratasyon tamamlanana kadar daha düşük öncelik verir; bu da TBT'yi doğal olarak iyileştirir.

Akış ve seçmeli hidratasyon birbirini tamamlar: akış, FCP ve LCP'yi iyileştirmek için HTML parçalarını gönderirken seçmeli hidratasyon, TTI ve TBT'yi iyileştirmek için JavaScript parçalarını işler. Birlikte, hem "içeriği hızlı gösterme" hem de "hızlı etkileşimli hâle getirme" boyutlarını ele alırlar.

React Sunucu Bileşenleri seçmeli hidratasyonu daha da ileri taşır: sunucu bileşenleri istemci için hiç JavaScript üretmez. Yalnızca "use client" ile işaretlenmiş istemci bileşenlerinin hidratlanması gerekir. Bu, hidratlanması gereken toplam JavaScript miktarını azaltarak seçmeli hidratasyonu daha da etkili hâle getirir.

Pratik bir yaklaşım şöyledir: akışlı HTML için renderToPipeableStream kullanın, hidratasyon kipini etkinleştirmek üzere sayfayı bir kök hydrateRoot çağrısıyla (createRoot yerine) sarın, görüntü alanının altındaki tüm bölümler için React.lazy kullanın ve her bölümü bir Suspense sınırına sarın. Geri kalanını React otomatik olarak yönetir.

Kullanıcı etkileşimi, React 18'de seçmeli hidratasyon önceliğini nasıl etkiler?

Seçmeli hidratasyon, React'in tüm paketi beklemek yerine JavaScript geldikçe bileşen alt ağaçlarını aşamalı olarak hidratlamasını sağlar. Kullanıcı etkileşimleri, hedeflenen alt ağacın hidratasyonuna öncelik verir. Görüntü alanının altındaki içerik için React.lazy ve dinamik içe aktarmaların Suspense sınırlarıyla birleştirilmesi bu aşamalı yaklaşımı mümkün kılar. Seçmeli hidratasyon ve akışlı SSR, birlikte hem içerik sunumu hem de etkileşim performansını ele alan birbirini tamamlayıcı tekniklerdir.