React Academy · Pelajaran

Kesalahan Hidrasi: Penyebab & Solusi

Identifikasi ketidaksesuaian antara HTML server dan klien, lalu perbaiki dengan suppressHydrationWarning.

Kesalahan Hidrasi: Penyebab & Solusi adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Apa Itu Kesalahan Hidrasi?

Kesalahan hidrasi terjadi ketika HTML yang dirender server oleh React tidak cocok dengan DOM virtual yang diharapkan React di klien. React mencatat peringatan dan merender ulang komponen dari awal, sehingga menyebabkan kilatan tampilan.

Penyebab Umum 1: Nilai Acak

Menggunakan Math.random(), Date.now(), atau crypto.randomUUID() selama perenderan menghasilkan nilai yang berbeda di server dan klien.

// Bad — different on server vs client:
<div id={Math.random().toString()}>...</div>

// Fix — use useId() (stable across server/client):
import { useId } from 'react';
function Component() {
  const id = useId();
  return <div id={id}>...</div>;
}

Penyebab Umum 2: API Khusus Peramban

Membaca localStorage, window.innerWidth, atau navigator saat merender menyebabkan kegagalan di server atau menghasilkan nilai yang berbeda.

// Bad — localStorage doesn't exist on server:
<div>{localStorage.getItem('theme')}</div>

// Fix — read in useEffect (client-only):
const [theme, setTheme] = useState('light');
useEffect(() => {
  setTheme(localStorage.getItem('theme') ?? 'light');
}, []);

Penyebab Umum 3: Pemformatan Tanggal/Waktu

Pemformatan tanggal yang bergantung pada lokal menghasilkan string yang berbeda di server (lokal UTC/Node) dan klien (lokal peramban).

// Risky — locale may differ:
<time>{new Date().toLocaleDateString()}</time>

// Fix — use a consistent locale:
<time>{new Date().toLocaleDateString('en-US', { timeZone: 'UTC' })}</time>

Penyebab Umum 4: Penyarangan HTML Tidak Valid

React menghasilkan HTML klien dari DOM virtual, tetapi penyarangan HTML yang tidak valid (misalnya, <p> di dalam <p>) menyebabkan peramban menyusun ulang DOM secara berbeda dan menimbulkan ketidakcocokan.

// Bad — browser auto-closes the nested <p>:
<p>Outer <p>Inner</p> text</p>

// Fix — use <div> or correct semantic elements:
<div>Outer <p>Inner</p> text</div>

Penyebab Umum 5: Perenderan Kondisional Berdasarkan Status

Komponen yang dirender secara berbeda berdasarkan status khusus klien (seperti autentikasi pengguna atau lebar layar) menjadi tidak cocok karena server merender tanpa status tersebut.

// Bad — server renders 'Guest', client re-renders 'Alice' immediately:
<h1>{user?.name ?? 'Guest'}</h1>

// Fix — use a mounted guard to defer client-only rendering:
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
if (!mounted) return <h1>Guest</h1>; // match server output

suppressHydrationWarning

Gunakan suppressHydrationWarning pada elemen yang ketidakcocokannya disengaja (misalnya, stempel waktu yang diformat di klien). Ini hanya menekan peringatan untuk elemen tersebut.

<time suppressHydrationWarning dateTime={isoDate}>
  {new Date(isoDate).toLocaleString()}
</time>

Impor Dinamis dengan ssr: false

Di Next.js, gunakan dynamic(fn, { ssr: false }) untuk mencegah komponen dirender di server sama sekali — sehingga menghilangkan ketidakcocokan hidrasi untuk komponen khusus klien.

import dynamic from 'next/dynamic';

const ClientOnlyChart = dynamic(() => import('./Chart'), { ssr: false });

export default function Dashboard() {
  return <ClientOnlyChart />; // only renders in the browser
}

Men-debug Kesalahan Hidrasi

React 18 mencatat pesan kesalahan hidrasi terperinci dalam mode pengembangan yang menunjukkan ketidakcocokan simpul DOM secara tepat. Gunakan DevTools peramban untuk memeriksa HTML server dan pohon React.

useId untuk ID Stabil

useId() menghasilkan ID unik dan stabil yang konsisten antara perenderan server dan klien — gunakan untuk pasangan id/htmlFor dan atribut ARIA.

function FormInput({ label }: { label: string }) {
  const id = useId();
  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <input id={id} />
    </div>
  );
}

Menguji Kesalahan Hidrasi

Jalankan aplikasi Next.js dalam mode pengembangan (npm run dev) dan pantau konsol peramban. Ketidakcocokan hidrasi muncul sebagai peringatan merah dengan jejak tumpukan komponen.

Pemeriksaan Singkat

Apa perbaikan terbaik untuk komponen yang dirender secara berbeda di server dan klien karena membaca dari localStorage?

Ringkasan

Ketidakcocokan hidrasi disebabkan oleh: nilai acak, API khusus peramban, pemformatan yang peka terhadap lokal, penyarangan HTML yang tidak valid, dan perenderan kondisional khusus klien. Perbaiki dengan useId(), useEffect untuk status khusus klien, suppressHydrationWarning untuk perbedaan yang disengaja, dan dynamic({ ssr: false }) untuk komponen khusus klien.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Kesalahan Hidrasi: Penyebab & Solusi” gratis?

Ya — teks lengkap “Kesalahan Hidrasi: Penyebab & Solusi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Kesalahan Hidrasi: Penyebab & Solusi”?

Identifikasi ketidaksesuaian antara HTML server dan klien, lalu perbaiki dengan suppressHydrationWarning. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Kesalahan Hidrasi: Penyebab & Solusi” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke React Academy