Hydration mismatch muncul ketika markup HTML hasil SSR tidak sesuai dengan data yang di-render di sisi klien. Untuk daftar webcam publik yang terus berubah, mismatch bisa muncul setiap kali data streaming masuk dan component mencoba menghydrate ulang.

Solusi praktisnya adalah mengontrol data awal, menjaga key agar stabil, serta menerapkan reconciling state yang menyelaraskan update streaming tanpa membalikkan hasil SSR. Artikel ini menjelaskan langkah konkret agar UI tetap sinkron dan responsif.

Perbedaan SSR dan Hydration dalam Konteks Webcam Publik

SSR menghasilkan markup statis berdasarkan snapshot data pada saat request, lalu JavaScript di klien mengambil alih melalui hydration. Masalah muncul ketika data dasarnya berubah di antara waktu rendering SSR dan proses hydration—misalnya daftar webcam bertambah atau menghilang. Hasilnya, React/Svelte mendeteksi bahwa struktur DOM tidak cocok, memicu "hydration mismatch" dan kadang menolak mengikat event atau state.

Untuk menatap masalah ini, perhatikan dua hal:

  • Snapshot data: Data harus tervalidasi dan sesuai shape yang dapat diprediksi sebelum dikirim ke klien.
  • Hydration yang stabil: Komponen harus menghindari perubahan struktur DOM yang mendadak saat library klien mengambil alih.

Validasi Data Awal dan Stabilitas Keys

Langkah awal adalah memastikan getServerSideProps/getInitialProps atau load function menghasilkan data yang valid dan lengkap. Validasi dilakukan pada server sebelum markup dihasilkan:

  • Periksa presence field penting (id, nama, status streaming).
  • Normalisasi nilai kosong ke bentuk default agar klien tidak mengalami undefined.
  • Gunakan mekanisme error boundary sederhana untuk mengganti dengan fallback konten saat data rusak.

Key stabil membantu React/Svelte mengenali entitas yang sama walau urutan berubah. Kunci harus berasal dari identifier unik (misalnya cameraId), bukan index array.

Contoh Next.js pseudo-code untuk validasi dan key:

export async function getServerSideProps() {
  const webcams = await fetchPublicWebcams();
  const valid = webcams.filter(w => w.cameraId && w.name);
  return { props: { webcams: valid } };
}

function WebcamList({ webcams }) {
  return (
    <ul>
      {webcams.map(camera => (
        <li key={camera.cameraId}>{camera.name}</li>
      ))}
    </ul>
  );
}

Penjelasan: validasi mengelimasi entry tidak lengkap, sementara key berdasar cameraId mencegah mismatch saat urutan berubah.

Reconciling State saat Data Streaming Berubah

Setelah hydration selesai, aliran data bisa datang melalui WebSocket, SSE, atau polling. Agar DOM tidak kacau, terapkan strategi reconciling sebagai berikut:

  1. State lokal minimal: Biarkan data SSR tetap menjadi baseline, lalu update state terpisah untuk perubahan realtime dengan strategi merge.
  2. Diffing manual: Bandingkan entry baru dengan baseline berdasarkan id, update hanya field yang berubah agar React tidak menghapus node dan membuat mismatch.
  3. Transition halus: Gunakan flag seperti isHydrated untuk menunda render dynamic overlay hingga hydration selesai.

Pendekatan contoh di SvelteKit:

let webcams = data.webcams;
let updates = [];

$: merged = mergeWebcams(webcams, updates);

function handlePushUpdate(payload) {
  updates = reconcileState(updates, payload);
}

function mergeWebcams(base, events) {
  const result = new Map(base.map(cam => [cam.cameraId, cam]));
  events.forEach(event => {
    const current = result.get(event.cameraId) || {};
    result.set(event.cameraId, { ...current, ...event });
  });
  return Array.from(result.values());
}

Penjelasan: state streaming disimpan terpisah dari snapshot awal. Fungsi mergeWebcams menyamakan data berdasarkan cameraId sehingga DOM tidak direcreate sepenuhnya.

Pola Fallback UI untuk Ketidaksinkronan

Ketika data tidak sinkron, siapkan fallback yang tetap memberi feedback:

  • Skeleton atau placeholder: Tampilkan elemen ringan untuk setiap slot webcam sebelum data final siap.
  • Status cached: Bila streaming gagal, tampilkan data terakhir yang valid dengan label "Terakhir diperbarui".
  • Graceful error: Jika data SSR hilang, berikan CTA refresh atau indikator retry otomatis.

Fallback juga membantu pada hydration mismatch—karena UI tidak berubah drastis saat ada perbedaan kecil antara SSR dan client.

Checklist Debugging Hydration Mismatch

Gunakan checklist berikut saat troubleshooting:

  1. Periksa console browser untuk pesan hydration mismatch dari React/Svelte.
  2. Bandingkan HTML SSR (lihat view source) dengan DOM setelah hydration untuk menemukan elemen yang berbeda.
  3. Pastikan key berasal dari identifier unik bukan index atau nilai dinamis.
  4. Validasi data awal masih utuh ketika diteruskan ke komponen klien.
  5. Cek apakah update streaming men-trigger rerender global vs partial.
  6. Tambahkan logging state merge untuk memahami perubahan per id.

Gunakan log server untuk memastikan payload streaming sesuai format yang diharapkan.

Kesimpulan

Hydration mismatch saat render daftar webcam publik bisa dicegah bila data awal tervalidasi, key stabil, dan perubahan realtime direkonsiliasi secara selektif. Dengan fallback UI dan checklist debugging, Anda bisa menjaga UI tetap konsisten walau data berubah cepat. Terapkan contoh pseudo-code di atas sebagai dasar sebelum mengadaptasi ke stack produksi Anda.