Cara Mengatasi Hydration Failed Next Js saat Render Berbeda

Ditulis oleh Next.js

Cara mengatasi hydration failed Next.js paling cepat adalah membuat HTML pertama dari server identik dengan render pertama di client, lalu memperbarui data dinamis setelah mount. Jangan langsung menempel suppressHydrationWarning sebelum tahu baris mana yang berbeda.

Penyebab Hydration Failed di App Router

React membandingkan HTML hasil Server Component dengan render awal Client Component. Selisih kecil saja memicu error hydration.

  • Teks berubah: new Date(), Date.now(), angka acak, ID acak, atau format tanggal mengikuti locale browser.
  • Data berbeda: fetch dengan cache berbeda, timezone server dan client tidak sama, atau sorting memakai waktu lokal.
  • Browser API dipakai saat render: window, document, localStorage, navigator, atau matchMedia dipanggil langsung di badan komponen.
  • State awal tidak konsisten dan ekstensi browser menyisipkan atribut atau elemen ke DOM.

Tabel Troubleshooting Hydration Failed

Gejala Penyebab Periksa Dulu
Teks berubah setelah load Tanggal, random, locale Cari Date dan Math.random di render
Atribut berbeda Ekstensi atau ID dinamis Uji mode incognito tanpa ekstensi
Error hanya di client Browser API di Server Component Pindah akses ke useEffect

Gunakan suppressHydrationWarning hanya untuk perbedaan kecil yang memang disengaja, misalnya format waktu lokal. Untuk perbedaan data atau struktur, refactor komponen.

Cara Mengatasi Hydration Failed Next Js Langkah per Langkah

  1. Reproduksi error di mode development, lalu catat nama komponen dari pesan React.
  2. Baca pesan error sampai baris atribut atau teks yang mismatch, bukan hanya judulnya.
  3. Isolasi komponen tersangka dengan me-render versi statis tanpa tanggal, random, dan browser API.
  4. Perbaiki sumber data: samakan locale, kirim timezone dari server, atau tunda data browser-only sampai setelah mount.
  5. Validasi ulang dengan refresh, navigasi client-side, dan build production.
'use client';
import { useEffect, useState } from 'react';

export default function Clock() {
  const [time, setTime] = useState<string | null>(null);

  useEffect(() => {
    setTime(new Date().toLocaleTimeString('id-ID'));
  }, []);

  if (!time) {
    return <p>Memuat waktu...</p>;
  }

  return <p>{time}</p>;
}

Pola di atas menjaga render pertama tetap sama di server dan client. Jangan mengubah seluruh route menjadi dinamis atau mematikan cache hanya untuk menutup error ini.

FAQ

Apakah use client memperbaiki semua hydration error?

Tidak. Client Component tetap mengalami hydration bila render pertamanya memakai data browser yang tidak ada saat prerender.

Kapan suppressHydrationWarning boleh dipakai?

Hanya untuk perbedaan presentasi kecil yang tidak memengaruhi logika, seperti format jam lokal satu elemen.

Kenapa error hanya muncul di production?

Perbedaan data, cache, timezone server production, dan minifikasi membuat mismatch yang tidak terlihat di development lebih mudah muncul.

Artikel Terkait