Deprecated

API ini akan dihapus pada React versi mayor berikutnya.

Di React 18, hydrate digantikan oleh hydrateRoot. Menggunakan hydrate di React 18 akan memberi peringatan bahwa aplikasi Anda akan berperilaku seakan-akan sedang berjalan di React 17. Pelajari selengkapnya di sini.

hydrate memungkinkan Anda menampilkan komponen React di dalam simpul DOM peramban yang konten HTML-nya sebelumnya telah dihasilkan oleh react-dom/server di React versi 17 ke bawah.

hydrate(reactNode, domNode, callback?)

Referensi

hydrate(reactNode, domNode, callback?)

Memanggil hydrate di React 17 dan yang lebih rendah untuk “melekatkan” React ke HTML yang sudah ada sebelumnya yang dihasilkan oleh React di lingkungan server.

import { hydrate } from 'react-dom';

hydrate(reactNode, domNode);

React akan melekat pada HTML yang ada di dalam domNode, dan mengambil alih pengelolaan DOM di dalamnya. Sebuah aplikasi yang sepenuhnya dibangun dengan React biasanya hanya akan memiliki satu pemanggilan hydrate dengan komponen akarnya.

Lihat lebih banyak contoh di bawah ini.

Parameter

  • reactNode: “Simpul React” yang digunakan untuk me-render HTML yang sudah ada. Ini biasanya berupa potongan JSX seperti <App /> yang di-render dengan metode (method) ReactDOM Server seperti renderToString(<App />) di React 17.

  • domNode: Sebuah elemen DOM yang di-render sebagai elemen akar di server.

  • opsional: callback: Sebuah fungsi. Jika diberikan, React akan memanggilnya setelah komponen Anda terhidrasi (hydrated).

Kembalian

hydrate mengembalikan nilai kosong (null).

Catatan

  • hydrate mengharapkan konten yang di-render identik dengan konten yang di-render di server. React dapat memperbaiki perbedaan dalam konten teks, tetapi Anda seharusnya memperlakukan ketidakcocokan tersebut sebagai bug dan memperbaikinya sendiri.
  • Dalam mode pengembangan, React memberi peringatan tentang ketidakcocokan selama hidrasi (hydration). Tidak ada jaminan bahwa perbedaan atribut akan diperbaiki dalam kasus ketidakcocokan. Ini penting untuk alasan kinerja karena dalam sebagian besar aplikasi, ketidakcocokan jarang terjadi, sehingga memvalidasi semua markup akan menjadi sangat mahal.
  • Kemungkinan Anda hanya akan memiliki satu pemanggilan hydrate dalam aplikasi Anda. Jika Anda menggunakan sebuah framework, mungkin framework tersebut melakukan panggilan ini untuk Anda.
  • Jika aplikasi Anda di-render oleh klien tanpa HTML yang sudah di-render sebelumnya, penggunaan hydrate() tidak didukung. Alih-alih menggunakan hydrate(), gunakanlah render() (untuk React 17 dan lebih rendah) atau createRoot() (untuk React 18+).

Penggunaan

Panggil hydrate untuk melekatkan sebuah komponen React kepada simpul DOM peramban yang di-render di server.

import { hydrate } from 'react-dom';

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

Penggunaan hydrate() untuk me-render aplikasi hanya di sisi klien (aplikasi tanpa HTML yang di-render oleh server) tidak didukung. Alih-alih menggunakan hydrate(), gunakanlah render() (di React 17 dan lebih rendah) atau createRoot() (di React 18+).

Menghidrasi HTML yang di-render oleh server

Di React, “hidrasi” adalah bagaimana React “melekatkan” ke HTML yang sudah ada sebelumnya yang telah di-render oleh React di lingkungan server. Selama hidrasi, React akan mencoba untuk melekatkan event listeners ke markup yang ada dan mengambil alih pe-render-an aplikasi pada sisi klien.

Pada aplikasi yang sepenuhnya dibangun dengan React, biasanya Anda hanya akan menghidrasi satu “akar” (”root”), yakni sekali saat memulai menjalankan seluruh aplikasi Anda”.

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

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

Biasanya Anda tidak perlu memanggil hydrate lagi atau memanggilnya di tempat lain. Dari titik ini, React akan mengelola DOM dari aplikasi Anda. Untuk memperbarui UI, komponen akan menggunakan state.

Untuk informasi lebih lanjut tentang hidrasi, lihat dokumen untuk hydrateRoot.

Menghilangkan kesalahan ketidakcocokan hidrasi yang tidak dapat dihindari

Jika satu atribut elemen atau konten teks secara tidak terhindarkan berbeda antara server dan klien (misalnya, timestamp), Anda dapat menghilangkan peringatan ketidakcocokan hidrasi.

Untuk menghilangkan peringatan hidrasi pada elemen, tambahkan suppressHydrationWarning={true}:

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

Cara ini hanya berfungsi untuk satu tingkat kedalaman dan dimaksudkan untuk menjadi jalan keluar ketika tidak ada pilihan lain. Jangan terlalu sering menggunakannya. Kecuali jika itu adalah konten teks, React masih tidak akan mencoba memperbaikinya, sehingga konten tersebut mungkin tetap tidak konsisten sampai dengan pembaruan di versi-versi mendatang.

Mengatasi konten berbeda antara client dan server

Jika Anda sengaja perlu me-render sesuatu yang berbeda di server dan klien, Anda dapat melakukan dua kali pe-render-an. Komponen yang me-render sesuatu yang berbeda pada sisi klien dapat di baca di variabel state seperti isClient, yang dapat ditetapkan ke true dalam sebuah efek:

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>
  );
}

Dengan cara ini, proses render awal akan me-render konten yang sama dengan server, menghindari ketidakcocokan, tetapi ada tambahan proses synchronously setelah hidrasi.

Pitfall

Metode ini membuat hidrasi lebih lambat karena komponen Anda harus di-render dua kali. Pertimbangkan pengalaman pengguna pada koneksi yang lambat. Kode JavaScript dapat dimuat jauh setelah render HTML awal, sehingga me-render UI yang berbeda langsung setelah hidrasi dapat terasa tidak nyaman bagi pengguna.

PreviousfindDOMNodeNextrender

How do you like these docs?