Hydration mismatch terjadi ketika struktur Virtual DOM hasil render sisi server (SSR) tidak identik dengan DOM pohon yang dievaluasi browser saat inisialisasi JavaScript. Masalah ini sering muncul pada antarmuka admin storage atau NAS dashboard saat menampilkan status konektivitas protokol jaringan lokal seperti SMB (Server Message Block) dan NFS (Network File System).

Penyebab Utama Hydration Mismatch pada Status Network Share

Tiga faktor utama memicu inkonsistensi rendering pada modul monitoring storage:

  • Perbedaan Environment Runtime: Node.js server dapat mengakses API sistem operasi host (misalnya membaca file mount points di /proc/mounts atau mengecek socket raw port 445/2049). Sebaliknya, browser client dibatasi oleh sandbox dan tidak memiliki akses socket langsung ke jaringan lokal tersebut.
  • Normalisasi URI Protokol: String target seperti smb://nas-corp.local/data atau nfs://192.168.1.50/exports sering diurai secara berbeda. Server merender path canonical sistem operasi, sedangkan browser memparsing URL melalui interface native window.location atau modul parser client yang mengubah trailing slash dan resolving hostname.
  • Latency Polling dan Race Condition: Fetching status status share yang berjalan bersamaan saat SSR selesai menghasilkan payload HTML statis, namun query polling client (misalnya React Query atau SWR) langsung memperbarui cache lokal sebelum proses hidrasi selesai.

Pola Solusi: Sinkronisasi Aman dengan useSyncExternalStore

Alternatif paling lazim adalah flag useEffect (two-pass rendering), namun pendekatan tersebut memicu flash content dan render cycle ganda. Menggunakan useSyncExternalStore dari React 18+ menyelesaikan masalah ini secara deterministik tanpa hydration warning.

// components/NetworkShareStatus.tsx
"use client";

import { useSyncExternalStore } from "react";

interface ShareState {
  uri: string;
  isMounted: boolean;
  protocol: "smb" | "nfs";
}

// Store client eksternal sederhana
const emptySubscribe = () => () => {};

export function NetworkShareBadge({ share }: { share: ShareState }) {
  // Snapshot server selalu false atau nilai deterministik awal
  const isClient = useSyncExternalStore(
    emptySubscribe,
    () => true,
    () => false
  );

  // Fallback rendering server yang deterministik
  if (!isClient) {
    return (
      <div className="share-badge pending">
        <span>{share.protocol.toUpperCase()}</span>
        <span>Memverifikasi...</span>
      </div>
    );
  }

  // Render client setelah hidrasi aman
  return (
    <div className={`share-badge ${share.isMounted ? "online" : "offline"}`}>
      <span>{share.protocol.toUpperCase()}</span>
      <span>{share.uri}</span>
      <span>{share.isMounted ? "Terhubung" : "Terputus"}</span>
    </div>
  );
}

Normalisasi Format URI Protokol Jaringan

Mencegah text-content mismatch memerlukan normalisasi URI sebelum dikirimkan ke DOM. Server dan client harus memproses URI menggunakan serializer identik:

// lib/formatters.ts
export function normalizeShareUri(protocol: "smb" | "nfs", host: string, path: string): string {
  // Hapus trailing dan duplicate slash
  const cleanPath = path.replace(/^\/+|\/+$/g, "");
  const cleanHost = host.toLowerCase().trim();
  return `${protocol}://${cleanHost}/${cleanPath}`;
}

Verifikasi Konsistensi Render Tree

Jalankan verifikasi assert sederhana di bawah ini di environment Node.js untuk membuktikan bahwa output HTML awal server identik dengan representasi server-side snapshot client:

// tests/hydration-check.js
const assert = require("node:assert/strict");

function renderServer(share) {
  // Server-rendered markup
  return `<div class="share-badge pending"><span>${share.protocol.toUpperCase()}</span><span>Memverifikasi...</span></div>`;
}

function renderClientInitial(share, isClient) {
  // Snapshot hidrasi awal sebelum sinkronisasi status aktif
  if (!isClient) {
    return `<div class="share-badge pending"><span>${share.protocol.toUpperCase()}</span><span>Memverifikasi...</span></div>`;
  }
  return `<div class="share-badge ${share.isMounted ? "online" : "offline"}"><span>${share.protocol.toUpperCase()}</span><span>${share.uri}</span><span>${share.isMounted ? "Terhubung" : "Terputus"}</span></div>`;
}

// Eksekusi pengujian
const mockShare = { protocol: "smb", uri: "smb://storage.lan/backup", isMounted: true };

const serverHtml = renderServer(mockShare);
const clientHydrationHtml = renderClientInitial(mockShare, false);

assert.equal(
  serverHtml,
  clientHydrationHtml,
  "CRITICAL: Server HTML dan Client Initial Snapshot harus identik untuk mencegah hydration mismatch!"
);

console.log("Assert lolos: Struktur DOM sinkron saat hidrasi.");
Catatan: Untuk penanganan lazy yang lebih ringkas tanpa custom store, gunakan opsi dinamis Next.js const DynamicBadge = dynamic(() => import('./Badge'), { ssr: false }) jika komponen status share berada di area dashboard privat yang tidak membutuhkan SEO indexing.