Hydration mismatch terjadi ketika representasi Virtual DOM yang di-generate oleh server tidak identik dengan pohon DOM hasil render pertama di sisi client. Masalah ini kerap muncul pada komponen lisensi dinamis, watermark runtime, atau legal attribution notice yang membaca status lingkungan pengguna secara langsung saat proses render berlangsung.

Konteks Lisensi Dinamis dan Copyright Defense

Menampilkan metadata lisensi dan watermark secara dinamis sering dibutuhkan untuk kebutuhan kepatuhan hukum dan atribusi kode. Pembahasan seputar batasan copyright defense dan pembuktian orisinalitas kode (sebagaimana disorot dalam diskusi Hacker News #48687769) mempertegas bahwa jejak audit legal, timestamp build, kepemilikan lisensi, dan identitas runtime klien sering kali harus disematkan langsung ke antarmuka aplikasi berlisensi komersial.

Ketika frontend mencoba menyematkan detail ini secara dinamis—seperti domain host aktif, status entitlement dari penyimpanan lokal, atau timestamp evaluasi lisensi—perbedaan lingkungan antara Node.js (server) dan browser (client) langsung memicu galat rehidrasi.

Penyebab Utama Hydration Mismatch

Ada tiga penyebab utama ketidakcocokan DOM pada komponen notice lisensi:

  • Akses Objek Global Browser: Penggunaan langsung variabel seperti window.location.hostname atau localStorage.getItem('license_key') saat komponen dievaluasi. Server tidak memiliki akses ke objek ini, menghasilkan fallback string kosong di SSR tetapi string valid di browser.
  • Timestamp Runtime yang Tidak Sinkron: Memanggil new Date().toISOString() langsung di badan fungsi render. Waktu eksekusi server selalu berbeda beberapa milidetik dari waktu browser mengevaluasi hidrasi.
  • Penyimpangan Feature Flag: Pengecekan entitlement berbasis cookie atau header yang belum terselesaikan di edge server, sehingga status lisensi dinilai berbeda antara SSR dan evaluasi client script.

Diagnosa Bug pada Komponen Masalah

Contoh implementasi yang memicu hydration mismatch:

// Komponen bermasalah: BuggyLicenseNotice.tsx
export default function BuggyLicenseNotice() {
  // Mengakses window langsung di render tree memicu mismatch
  const clientDomain = typeof window !== 'undefined' ? window.location.hostname : 'eval.local';
  const evaluatedAt = new Date().toLocaleDateString();

  return (
    <div className="license-watermark">
      <p>Licensed to: {clientDomain}</p>
      <p>Verified on: {evaluatedAt}</p>
    </div>
  );
}

Browser akan mengeluarkan peringatan di console development: Text content does not match server-rendered HTML. React terpaksa membuang DOM server dan melakukan re-render ulang pohon DOM tersebut, yang menurunkan performa Core Web Vitals (LCP/CLS).

Solusi Perbaikan Teruji

1. Two-Pass Rendering Menggunakan useEffect

Pola paling aman tanpa menonaktifkan SSR untuk keseluruhan halaman adalah menunda render data spesifik client hingga proses rehidrasi awal selesai.

// Solusi: SafeLicenseNotice.tsx
import { useState, useEffect } from 'react';

interface LicenseState {
  domain: string;
  verifiedAt: string;
}

export function SafeLicenseNotice() {
  const [license, setLicense] = useState<LicenseState | null>(null);

  useEffect(() => {
    // ponytail: upgrade ke server-injected session token jika butuh cryptographic proof
    setLicense({
      domain: window.location.hostname,
      verifiedAt: new Date().toLocaleDateString(),
    });
  }, []);

  if (!license) {
    // Placeholder identik antara SSR dan Client Pass 1
    return <div className="license-watermark-skeleton" aria-hidden="true" />;
  }

  return (
    <aside className="license-watermark" role="note">
      <p>Licensed to: {license.domain}</p>
      <p>Verified on: {license.verifiedAt}</p>
    </aside>
  );
}

Pola di atas menjamin Pass 1 di client menghasilkan output yang 100% sama dengan HTML dari server (komponen skeleton). Setelah hidrasi stabil, useEffect dieksekusi untuk menampilkan metadata riil.

2. Dynamic Import dengan SSR Dinonaktifkan

Jika komponen watermark mengandung logika validasi lisensi client-side yang berat, pisahkan komponen tersebut menggunakan dynamic import.

import dynamic from 'next/dynamic';

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

export default function AuditFooter() {
  return (
    <footer>
      <p>Legal Attribution Framework</p>
      <DynamicLicenseBadge />
    </footer>
  );
}

Trade-offs dan Pertimbangan

Menonaktifkan SSR via dynamic import menghilangkan jejak notice dari source HTML asli, yang dapat berpengaruh negatif jika metadata hak cipta perlu diindeks oleh bot atau web crawler audit. Sementara itu, two-pass rendering mempertahankan kerangka DOM awal namun menimbulkan sedikit pergeseran layout jika ukuran visual skeleton tidak dikunci secara eksplisit menggunakan CSS min-height.