Kullanımdan Kaldırıldı

Bu API, React’in gelecekteki bir ana sürümünde kaldırılacaktır.

React 18’de, hydrate yerine hydrateRoot kullanılmıştır. React 18’de hydrate kullanmak, uygulamanızın React 17 çalışıyormuş gibi davranacağı konusunda uyarı verir. Daha fazla bilgi için buraya göz atın.

hydrate, React 17 ve altındaki sürümlerde, HTML içeriği daha önce react-dom/server tarafından oluşturulmuş olan bir tarayıcı DOM düğümü içinde React bileşenlerini görüntülemenizi sağlar.

hydrate(reactNode, domNode, callback?)

Başvuru

hydrate(reactNode, domNode, callback?)

React 17 ve altındaki sürümlerde, hydrate çağrısı yaparak React’i sunucu ortamında zaten render edilmiş olan mevcut HTML’ye “bağlayabilirsiniz”.

import { hydrate } from 'react-dom';

hydrate(reactNode, domNode);

React, domNode içinde var olan HTML’ye bağlanacak ve içindeki DOM’u yönetmeye başlayacaktır. Tamamen React ile oluşturulmuş bir uygulama genellikle kök bileşeniyle yalnızca bir hydrate çağrısına sahip olacaktır.

Aşağıda daha fazla örnek görün.

Parametreler

  • reactNode: Mevcut HTML’yi render etmek için kullanılan “React düğümü”. Bu genellikle React 17’de renderToString(<App />) gibi bir ReactDOM Server yöntemi ile render edilmiş <App /> gibi bir JSX parçası olacaktır.

  • domNode: Sunucuda kök eleman olarak render edilmiş bir DOM elemanı.

  • isteğe bağlı: callback: Eğer geçilirse, bileşeniniz hydrate edildikten sonra React bu fonksiyonu çağıracaktır.

Dönen Değerler

hydrate null döner.

Uyarılar

  • hydrate, render edilmiş içeriğin sunucu tarafından render edilen içerikle aynı olmasını bekler. React, metin içeriğindeki farklılıkları düzeltebilir, ancak uyumsuzlukları hatalar olarak görmeli ve düzeltmelisiniz.
  • Geliştirme modunda, React, hydrate işlemi sırasında uyumsuzluklar hakkında uyarır. Uyumsuzluk durumunda özellik farklılıklarının düzeltileceği garantisi yoktur. Bu, performans nedenleriyle önemlidir çünkü çoğu uygulamada, uyumsuzluklar nadirdir ve bu nedenle tüm işaretlemeyi doğrulamak aşırı derecede pahalı olurdu.
  • Uygulamanızda muhtemelen yalnızca bir hydrate çağrısı olacaktır. Bir çatı kullanıyorsanız, bu çağrıyı sizin için yapabilir.
  • Uygulamanızda önceden render edilmiş HTML olmadan yalnızca istemci tarafından render edilmişse, hydrate() kullanımı desteklenmez. Bunun yerine render() (React 17 ve altı için) veya createRoot() (React 18+ için) kullanın.

Kullanım

Bir React bileşenini bir sunucu-render tarayıcı DOM düğümüne bağlamak için hydrate çağrısı yapın.

import { hydrate } from 'react-dom';

hydrate(<App />, document.getElementById('root'));

Yalnızca istemci için bir uygulamayı (önceden sunucuda render edilmemiş bir uygulamayı) render etmek için hydrate() kullanımı desteklenmez. Bunun yerine render() (React 17 ve altı için) veya createRoot() (React 18+ için) kullanın.

Sunucuda render edilmiş HTML’yi hydrate etme

React’te, “hydration”, React’in bir sunucu ortamında zaten render edilmiş olan mevcut HTML’ye “bağlanması” anlamına gelir. Hydration sırasında, React mevcut işaretlemeye olay dinleyicilerini bağlamaya çalışır ve uygulamayı istemcide render etmeyi devralır.

Tamamen React ile oluşturulmuş uygulamalarda, genellikle tüm uygulamanız için başlangıçta yalnızca bir “kök” hydrate edersiniz.

import './styles.css';
import { hydrate } from 'react-dom';
import App from './App.js';

hydrate(<App />, document.getElementById('root'));

Genellikle hydrate çağrısını başka bir yerde tekrar yapmanız veya çağırmanız gerekmez. Bu noktadan itibaren, React uygulamanızın DOM’unu yönetiyor olacaktır. UI’yi güncellemek için bileşenleriniz state kullanacaktır.

Hydration hakkında daha fazla bilgi için, hydrateRoot belgelerine bakın.

Kaçınılmaz hydration uyumsuzluk hatalarını bastırma

Sunucu ve istemci arasındaki bir elemanın özelliği veya metin içeriği kaçınılmaz olarak farklıysa (örneğin, bir zaman damgası), hydrate uyumsuzluk uyarısını bastırabilirsiniz.

Bir elemandaki hydrate uyarılarını bastırmak için suppressHydrationWarning={true} ekleyin:

export default function App() {
  return (
    <h1 suppressHydrationWarning={true}>
      Current Date: {new Date().toLocaleDateString()}
    </h1>
  );
}

Bu yalnızca bir seviye derinlikte çalışır ve bir kaçış yolu olarak tasarlanmıştır. Fazla kullanmayın. Metin içeriği olmadıkça, React yine de bunu düzeltmeye çalışmaz, bu nedenle gelecekteki güncellemelere kadar tutarsız kalabilir.

Farklı istemci ve sunucu içeriğini yönetme

İstemcide ve sunucuda kasıtlı olarak farklı bir şey render etmeniz gerekiyorsa, iki geçişli render yapabilirsiniz. İstemcide farklı bir şey render eden bileşenler, isClient gibi bir state değişkeni okuyabilir ve bu değişkeni bir Effect içinde true olarak ayarlayabilirsiniz:

import { useState, useEffect } from "react";

export default function App() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  return (
    <h1>
      {isClient ? 'Is Client' : 'Is Server'}
    </h1>
  );
}

Bu şekilde, ilk render geçişi sunucudaki içeriği aynı şekilde render eder, uyumsuzluklardan kaçınır, ancak hydrate işleminden hemen sonra ek bir geçiş daha gerçekleşir.

Tuzak

Bu yaklaşım, bileşenlerinizin iki kez render edilmesi gerektiğinden hydrate işlemini yavaşlatır. Yavaş bağlantılarda kullanıcı deneyimini göz önünde

bulundurun. JavaScript kodu, başlangıç HTML render’ından önemli ölçüde sonra yüklenebilir, bu nedenle hydrate işleminden hemen sonra farklı bir UI render etmek kullanıcıya rahatsız edici gelebilir.

PreviousfindDOMNode
Nextpreconnect