Render mismatch dan hydration state yang tidak konsisten kerap muncul saat Go Fiber menyajikan HTML/JSON untuk klien Svelte atau React. Dalam dua paragraf ini langsung kita jelaskan: kumpulkan snapshot markup server, bandingkan dengan DOM yang di-hydrate di browser, dan validasi state awal yang dikirim lewat payload.

Selanjutnya artikel memperlihatkan debugging praktis—dengan logging payload Fiber, inspeksi props/state di klien, hingga memastikan urutan rendering dinamis (tanggal, locale, random) tetap deterministik—sebelum akhirnya membahas mitigasi Fiber agar UI tidak membingungkan.

Diagnosa Render Mismatch: Mengumpulkan Snapshot Markup Server

Render mismatch terjadi ketika HTML statis yang dikirim Fiber berbeda dengan DOM yang kembali dirender saat hydration di sisi klien. Langkah pertama adalah mendapatkan snapshot markup yang benar-benar dikirim server, bukan template sebelum pengisian.

Logging Payload dan Snapshot dari Fiber

Di handler Fiber yang menangani SSR, tambahkan logging snapshot final beserta data yang digunakan. Contoh logging minimal:

func renderPage(c *fiber.Ctx) error {
    data := buildPageData()
    buf := &bytes.Buffer{}
    if err := tmpl.Execute(buf, data); err != nil {
        return err
    }
    log.Printf("[SSR snapshot] path=%s len=%d", c.Path(), buf.Len())
    log.Printf("[SSR data] %+v", data)
    c.Set("Content-Type", "text/html")
    return c.Send(buf.Bytes())
}

Gunakan log ini untuk menyimpan file HTML snapshot. Jika dibutuhkan, kirimkan juga data JSON awal ke file terpisah untuk perbandingan nanti.

Membandingkan DOM yang Dirender Ulang di Browser

Setelah halaman di-render di browser, buka DevTools → Elements dan ekspor innerHTML root. Gunakan alat perbandingan teks (misalnya diff) antara snapshot server dan DOM client. Fokus pada bagian yang berubah: apakah ada elemen tambahan, atribut berbeda, atau order node berubah akibat rendering dinamis?

Jika perbedaan muncul pada atribut seperti data-testid atau teks tanggal, maka penyebabnya bisa berupa data awal yang berbeda. Jika DOM paling atas berubah, pastikan server mengirim markup yang benar-benar final dan tidak ada middleware lain yang menyisipkan transformasi.

Memeriksa State Awal dan Hydration Data

Hydration memerlukan data awal yang sama antara server dan client: props component dan state global harus identik. Amazon atau Svelte/React biasanya mengambilnya dari window.__INITIAL_DATA__ atau prop JSON yang diinject Fiber.

Menangkap Data Awal JSON

Di Fiber, simpan JSON data sebelum render dan log ke file/console:

payload := map[string]any{
    "user": user,
    "items": items,
}
payloadBytes, _ := json.Marshal(payload)
log.Printf("[INITIAL DATA] %s", payloadBytes)

Di sisi klien, buka console dan bandingkan dengan data yang diterima via fetch atau inline script. Jika props berbeda (misalnya jumlah item tidak cocok), hydration akan gagal karena React/Svelte mendeteksi mismatch.

Urutkan Rendering Dinamis

Rendering dinamis seperti tanggal saat ini, locale, atau angka acak menyebabkan markup berubah tiap request. Untuk melacaknya:

  • Pastikan tanggal/locale dihitung sekali di server dan dikirim sebagai data, lalu gunakan data yang sama di client.
  • Jika Anda perlu nilai acak, buat generator di server dan kirim bersama data awal, lalu gunakan nilai itu di klien.
  • Tambah middleware yang menghilangkan penghitungan ulang setelah hydration, misalnya menyimpan locale di cookie.

Dengan cara ini, DOM yang di-render ulang menggunakan data identik dengan markup server.

Debugging Hydration: Langkah Praktis

Langkah debugging praktis:

  1. Log payload server (HTML dan JSON). Simpan snapshot untuk dibandingkan lokal.
  2. Gunakan DevTools → Network untuk memastikan payload JSON/HTML diterima seperti yang di-log.
  3. Bandingkan props/state di client dengan payload JSON menggunakan console.log(window.__INITIAL_DATA__) atau inspector state framework (React DevTools).
  4. Periksa apakah ada rendering async di client yang memodifikasi DOM sebelum hydration selesai. Pastikan data async menunggu sampai hydration selesai jika perlu.
  5. Temukan bagian markup yang berbeda dengan diff dan telusuri apakah disebabkan oleh data yang tidak deterministik.

Gunakan browser mode Disable cache untuk yakin bahwa mismatch bukan karena cache lama.

Mitigasi Go Fiber Agar Hydration Konsisten

Beberapa mitigasi untuk mencegah UI membingungkan:

  • Middleware caching: Cache markup hasil render untuk path yang sama, lalu serve cache ketika data tidak berubah. Pastikan cache invalidasi terjadi bila data berubah.
  • Header deterministik: Tambahkan header seperti X-Render-Version atau timestamp untuk memastikan versi data dengan yang diharapkan client.
  • Versi data: Sertakan versi payload dalam JSON (contoh: {version: 42}). Jika client menerima versi berbeda saat hydrating ulang, trigger re-fetch data daripada lanjutkan hydration.
  • Log mismatched keys: Ketika React/Svelte memberi peringatan mismatch, log key atau prop utama ke console untuk cepat menemukan asal ketidaksesuaian.

Dengan pendekatan ini, Go Fiber tetap bisa melayani SSR tanpa menyebabkan hydration state kacau di klien.

Kesimpulannya, diagnosis yang terstruktur—mulai dari snapshot HTML, data payload, hingga kontrol atas rendering dinamis—menjadi kunci agar Go Fiber bekerja harmonis dengan Svelte atau React. Terus log dan bandingkan hingga semua bagian deterministik sebelum hydrasi selesai.