Digital Transformation
Hydration Mismatch
TL;DR: Hydration mismatch terjadi ketika HTML yang dikirim server berbeda dengan apa yang React render saat pertama kali "menghidupkan" halaman di browser. Akibatnya React membuang hasil server, me-render ulang dari nol, dan memicu warning, layout shift, sekaligus penurunan performa interaktif.
Apa itu Hydration Mismatch?
Pada framework seperti Next.js, server mengirim HTML jadi agar halaman cepat tampil. Lalu React di browser melakukan hydration: menempelkan event handler ke HTML yang sudah ada. Hydration mismatch muncul saat struktur HTML server tidak identik dengan yang React harapkan, misalnya karena render bergantung pada window, Date.now(), atau angka acak yang berbeda di server dan klien.
Analoginya seperti memesan baju jadi lewat ukuran, lalu saat dicoba ternyata polanya tidak pas, jadi penjahit membongkar dan menjahit ulang di tempat. Pengguna melihat halaman "berkedip" atau bergeser. Ini berhubungan erat dengan React Server Components yang mengatur batas mana yang dirender di server.
Penyebab Umum
| Penyebab | Contoh |
|---|---|
| Akses browser API saat render | Memakai localStorage atau window langsung |
| Nilai non-deterministik | Math.random(), Date.now() di body komponen |
| HTML tidak valid | <div> di dalam <p> yang dinormalisasi browser |
| Locale berbeda | Format tanggal/angka beda antara server dan klien |
Kenapa Penting?
Hydration mismatch bukan sekadar warning di konsol. Re-render paksa menambah beban di main thread dan memperburuk INP, sementara pergeseran elemen merusak CLS. Dalam beberapa proyek Next.js yang saya tangani, sumber tersering adalah komponen yang membaca preferensi tema dari browser saat render awal. Solusi standarnya: tunda logika yang bergantung browser ke dalam useEffect, atau bungkus dengan guard agar render server dan klien menghasilkan output yang sama.
Pertanyaan Umum
Apakah hydration mismatch memengaruhi SEO?
Tidak langsung, karena Googlebot membaca HTML server yang valid. Tapi dampak tidak langsungnya nyata lewat Core Web Vitals yang memburuk, dan itu faktor peringkat.
Bagaimana cara menemukan sumbernya?
Buka konsol browser saat development. React mencetak pesan "hydration failed" beserta elemen yang berbeda. Mulai telusuri dari komponen yang membaca data spesifik-klien.
Istilah Terkait