Debugging Hydration React mengharuskan kita memeriksa apakah state yang dihasilkan server dan yang berlaku di browser benar-benar selaras saat hydration. Langkah pertama adalah mencatat data awal dari server, lalu membandingkannya dengan state yang muncul di sisi klien dengan log atau snapshot di dalam useEffect. Kesalahan ini biasanya muncul karena data dinamis seperti waktu, prop berbasis window, atau nilai yang berubah antara render server dan browser.

Artikel ini menguraikan teknik deteksi mismatch, pola penguncian state untuk mencegah UI berkedip, serta tip observasi agar UI tidak kehilangan fokus atau menampilkan hasil sementara yang salah.

Memahami Ketidaksesuaian State Antara SSR dan Klien

Render mismatch terjadi ketika markup HTML statis dari server tidak cocok dengan DOM yang dibuat ulang oleh React di browser. React melaporkan peringatan hydration failed jika tree yang dihasilkan berbeda. Beberapa penyebab umum:

  • Data dinamis seperti timestamp atau angka acak yang berubah antara server dan client.
  • Akses langsung ke window atau document saat server belum memiliki objek tersebut.
  • Penggunaan state lokal yang bergantung pada efek samping (contoh: memuat data berdasarkan query yang diubah di useEffect tanpa fallback, lalu langsung merender).

Memahami sumber perubahan membantu menentukan titik log atau snapshot yang relevan.

Langkah Praktis Mendeteksi Render Mismatch

1. Catat state dari server

Tulis payload JSON atau data attributes pada HTML yang dikirimkan server. Next.js secara default menyisipkan data __NEXT_DATA__, tetapi Anda bisa menambahkan atribut khusus untuk komponen rentan.

2. Bandingkan state di useEffect

Gunakan useEffect tanpa dependensi untuk logging pertama kali render klien. Ini memastikan Anda tidak log sebelum React melakukan hydration.

useEffect(() => {
  const serverState = window.__INITIAL_STATE__;
  console.log('state server', serverState);
  console.log('state client', localState);
  if (JSON.stringify(serverState) !== JSON.stringify(localState)) {
    console.warn('Hydration mismatch detected');
  }
}, []);

Gunakan snapshot serialisasi sederhana, lalu bandingkan. Hindari logging berlebihan yang mengubah state.

Pola Penguncian State Saat Hydration

Jika data dinamis tidak dapat disamakan secara deterministik, Anda bisa menunggu hidrasi selesai sebelum menampilkan hasil penuh.

Hydration Guard

function HydrationGuard({ fallback, children }) {
  const [hydrated, setHydrated] = useState(false);

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

  if (!hydrated) {
    return fallback || null;
  }

  return children;
}

Gunakan komponen ini untuk membungkus bagian UI yang tergantung pada data client-only. Trade-off-nya: UX perlu fallback agar tidak terlihat kosong terlalu lama.

Fallback Loading di SSR

Jika data harus diambil saat hydration, sediakan state fallback (misalnya skeleton). Di Next.js, data bisa diambil di getServerSideProps dan diharapkan sama dengan data client. Jika ketidaksesuaian tetap terjadi, tampilkan skeleton sampai client memverifikasi ulang.

Tip Debugging untuk UI Berkedip atau Hilang Fokus

  • Kepala fokus: Jika elemen input kehilangan fokus, berarti React mengganti elemen saat hydration. Catat status di console sebelum dan sesudah hydration.
  • Waktu dan tanggal: Gunakan utilitas untuk menormalisasi nilai (contoh: Date.toISOString()) sehingga nilai tidak berbeda karena zona waktu server vs client.
  • Perubahan props berbasis window: Jangan set state langsung dari ukuran jendela pada render server. Gunakan useLayoutEffect di client untuk memperbarui setelah hydration.

Jika UI berkedip, tandainya sebagai reset state. Gunakan snapshot DOM (misal Node snapshot) dan periksa apakah React memasukkan ulang elemen root.

Kesimpulan

Debugging Hydration React membutuhkan pendekatan terukur: catat state awal, bandingkan di browser, dan gunakan guard atau fallback bila perlu. Selalu telaah apa yang berubah antara render server dan klien—apakah data bersifat dinamis, tergantung waktu, atau berasal dari window. Dengan memantau mismatch melalui log dan snapshot, Anda dapat meminimalkan peringatan hydration serta UI yang berkedip atau kehilangan fokus.