Render mismatch terjadi ketika SSR dan kode klien menghasilkan DOM berbeda, dan dapat memicu warning hydration di konsol. Artikel ini langsung membahas cara membaca warning tersebut, mengidentifikasi akar masalah seperti state divergen, cache aset, dan timing, serta menyinggung teknik cache favicon yang dapat memperburuk situasi.

Mengapa render mismatch muncul

Render mismatch adalah sinyal bahwa tree DOM server dan klien tidak cocok saat React/Vue/Framework lain mencoba hydrate. Penyebab umum:

  • State divergen: Data initial dari server berbeda dengan yang tersedia di klien, misalnya karena fetch asinkron berjalan dua kali atau cache lokal menahan versi lama.
  • Cache aset (termasuk favicon): Aset seperti favicon yang secara tidak terduga menyimpan snapshot HTML (referensi teknik penyimpanan snapshot dalam favicon) bisa membuat klien melihat konten berbeda saat hydration karena cache tidak di-refresh.
  • Timing render: Efek atau hook yang mengganti UI setelah render pertama di klien dapat menciptakan perubahan lebih cepat dari waktu React melakukan diff.

Setiap kasus ini menimbulkan warning hydration seperti "Warning: Did not expect server HTML to contain a ..." yang seharusnya langsung ditangani.

Mendeteksi render mismatch secara efektif

1. Waspadai warning hydration

Console browser akan menampilkan warning spesifik. Cari pesan yang menyebutkan node yang tidak cocok atau subtree yang diulang. Catat stack trace untuk melihat komponen sumber. Jangan abaikan warning ini karena ia menandakan perbedaan nyata.

2. Gunakan DOM diff manual

Setelah warning muncul, buka tab Elements, pilih node yang disebutkan, lalu bandingkan struktur server (biasanya ditandai dengan atribut data-reactroot atau komentar SSR) dengan hasil akhir klien. Fokus pada atribut, teks, atau children yang berbeda.

3. Debug timing dengan DevTools

Aktifkan timeline/Profiler. Rekam load page dan perhatikan apakah state berubah di tengah proses hydration. Jika script klien memicu update sebelum hydration selesai, perlu ditunda atau disinkronkan.

4. Twister cache favicon

Jika aplikasi menggunakan teknik favicon yang menyimpan snapshot halaman, pastikan cache favicon tidak mengandung HTML usang. Favicon yang di-cache dapat menyebabkan browser menyisipkan markup lama sebelum hydration selesai, terutama bila favicon disajikan sebagai data URI yang berisi HTML atau SVG dengan elemen UI. Solusinya: sertakan metadata versi di query string atau pastikan refresh cache di setiap deploy.

Langkah mitigasi praktis

Sinkronisasi state server dan klien

Gunakan pendekatan di mana klien menunggu data yang sama dengan server. Contohnya, jika server menyuntikkan state awal ke window.__INITIAL_STATE__, pastikan klien menggunakan data tersebut alih-alih memicu fetch baru sebelum hydration selesai.

Validasi cache favicon dan aset

Lakukan pengecekan versi otomatis untuk file statis; tambahkan hash ke thumb favicon bila menggunakan teknik snapshot. Berikut contoh middleware sederhana untuk menambahkan cache-busting header:

app.use((req, res, next) => {
  if (req.url.includes('favicon')) {
    res.setHeader('Cache-Control', 'no-store');
  }
  next();
});

Langkah ini memastikan favicon yang mengandung snapshot tidak digunakan ulang setelah pembaruan halaman.

Fallback update terkontrol

Jika Anda harus memperbarui UI secara langsung setelah hydration, bungkus logic tersebut dalam efek yang hanya berjalan ketika flag isHydrated true. Ini menghindari perubahan langsung selama proses initial render.

Monitoring dan alert

Masukkan warning hydration ke sistem logging (misalnya monitoring console di Sentry). Pasang rule untuk memicu alert ketika pesan tertentu muncul ulang dalam jumlah banyak.

Snippet debugging dan checklist verifikasi

Saat menelusuri render mismatch, gunakan snippet ini untuk melacak apakah state klien cocok dengan server:

const serverState = window.__INITIAL_STATE__;
const clientState = getClientState();
if (JSON.stringify(serverState) !== JSON.stringify(clientState)) {
  console.warn('Mismatch state hydration', serverState, clientState);
}

Checklist verifikasi sebelum deploy:

  1. Periksa warning hydration di konsol dan pastikan tidak ada SSR mismatch.
  2. Validasi cache-busting untuk favicon, asset, dan data API.
  3. Gunakan DevTools network untuk memastikan klien tidak memuat snapshot lama dari favicon atau HTML.
  4. Pastikan efek atau hook tidak mengubah DOM sebelum hydration selesai (tunda sampai isHydrated benar).
  5. Pasang monitoring untuk warning hydration agar bisa ditindaklanjuti.

Kesimpulan

Render mismatch dan cache favicon yang menyimpan snapshot bisa saling memperparah: warning hydration tidak boleh diabaikan karena ia mengindikasikan ketidaksesuaian nyata. Dengan mendeteksi lewat warning, DOM diff, dan DevTools, serta menjaga state dan cache tetap konsisten, Anda menjaga UI tetap stabil setelah hydration.

Sertakan langkah mitigasi di pipeline deploy agar favicon, cache aset, dan log warning terus diawasi. Debugging sederhana—membandingkan state server dan klien, menonaktifkan cache favicon, dan menunda update UI—sudah sering kali cukup meredam render mismatch.