Deprecated

API ini akan dihapus pada mayor versi 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. Selengkapnya di sini.

hydrate memungkinkan anda menampilkan komponen React di dalam node DOM peramban yang konten HTML-nya sebelumnya telah dihasilkan oleh react-dom/server di React 17 dan yang lebih rendah.

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 hydrate panggilan dengan komponen akarnya.

Lihat lebih banyak contoh di bawah ini.

Parameters

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

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

  • optional: callback: Sebuah fungsi. Jika diberikan, React akan memanggilnya setelah komponen anda hydrated.

Returns

hydrate returns kosong.

Catatan

  • hydrate mengharapkan konten yang di-render identik dengan konten yang di-render di server. React dapat memperbaiki perbedaan dalam konten teks, tetapi anda harus memperlakukan ketidakcocokan sebagai bug dan memperbaikinya.
  • Dalam mode pengembangan, React memberi peringatan tentang ketidakcocokan selama 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 hydrate panggilan 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, menggunakan hydrate() tidak didukung. Gunakan render() (untuk React 17 dan lebih rendah) or createRoot() (untuk React 18+) sebaliknya.

Penggunaan

Panggil hydrate untuk melekatkan sebuah React component menjadi server-rendered peramban DOM node.

import { hydrate } from 'react-dom';

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

Menggunakan hydrate() untuk me-render aplikasi hanya di sisi klien (aplikasi tanpa HTML yang di-render oleh server) tidak didukung. Gunakan render() (di React 17 dan lebih rendah) atau createRoot() (di React 18+) sebaliknya.

Hydrating HTML yang di-render oleh server

Di React, “hydration” adalah bagaimana React “attaches” ke HTML yang sudah ada sebelumnya yang telah di-render oleh React di lingkungan server. Selama hydration, React akan mencoba untuk melekatkan event listener ke markup yang ada dan mengambil alih rendering aplikasi pada klien.

Pada aplikasi yang sepenuhnya dibangun dengan React, biasanya hanya akan ada satu hydrate “root”, sekali saat memulai untuk 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 use state.

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

Menghilangkan kesalahan ketidakcocokan hydration 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 hydration.

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

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

Hal ini hanya berfungsi untuk satu level kedalaman saja 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 update yang akan datang.

Mengatasi konten berbeda antara client dan server

Jika anda sengaja perlu me-render sesuatu yang berbeda di server dan klien, anda dapat melakukan rendering dua kali. Komponen yang me-render sesuatu yang berbeda pada sisi klien dapat di baca di state variable seperti isClient, yang dapat ditetapkan ke true dalam sebuah effect:

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 hydration.

Pitfall

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

PreviousfindDOMNodeNextrender

How do you like these docs?