Menghindari Hydration Mismatch saat Membangun Container UI ala Davit

export async function getServerSideProps() {
  const layout = await fetchLayoutConfig();
  return { props: { layout } };
}

function Container({ layout }) {
  const [activePanel, setActivePanel] = React.useState(layout.defaultPanel);
  return (
    <div data-container-theme={layout.theme}>...

Perhatikan bahwa state awal berasal dari props yang pasti sama antara server dan client. Hindari memanggil API atau menggunakan Date.now() langsung saat render server karena nilai tersebut tidak akan sama ketika React hydrates di client.

Menjaga Konsistensi State dan Style

State lokal dan efek samping bisa memicu perbedaan markup. Terapkan prinsip berikut:

• Gunakan useMemo atau useState dengan dependency dari props yang sudah terukur sejak server.
• Tunda interaksi visual yang mengandalkan ukuran layar atau prefers-color-scheme sampai client-ready dengan flag seperti if (typeof window !== 'undefined').
• Jangan inline style yang bergantung pada nilai random karena akan berbeda saat hydrating.

Ketika perlu menyesuaikan theme berdasarkan preferensi pengguna, gunakan class utility (misal className={isDark ? 'dark' : 'light'}) dan pastikan class default sudah terpasang saat render server.

Memeriksa Perbedaan DOM Server vs Client

React akan memberikan warning di console jika markup berbeda. Selain itu, Anda dapat membandingkan DOM server dan client dengan cara:

1. Gunakan React DevTools untuk melihat prop/state komponen saat hydration dan pastikan nilainya sama dengan output server.
2. Tambahkan console.log di komponen untuk membandingkan data antara render server (periksa log di server atau build) dan useEffect pertama di client.
3. Manfaatkan next dev untuk live reload dan perhatikan warning hydration mismatch di terminal maupun browser console.

Jika markup berbeda, cari atribut yang berubah—misalnya attribute data-container-layout atau struktur list yang dinamis.

Fallback untuk Data Asinkron dan SSR

Container UI ala Davit sering memerlukan data asinkron (misal statistik, rekomendasi). Pastikan data tersebut disuplai melalui SSG/SSR dengan fallback yang konsisten:

• Gunakan getStaticProps dengan revalidate untuk data yang jarang berubah, lalu jadikan data fallback untuk client fetching.
• Biarkan komponen internal menampilkan skeleton berdasarkan props awal, dan update data lengkap lewat useEffect setelah hydration.

Contoh pendekatan:

export async function getStaticProps() {
  const previewLayout = await fetchLayoutPreview();
  return { props: { previewLayout }, revalidate: 60 };
}

function Container({ previewLayout }) {
  const [layout, setLayout] = React.useState(previewLayout);

  React.useEffect(() => {
    fetch('/api/layout/latest')
      .then(res => res.json())
      .then(setLayout);
  }, []);

  return <LayoutRenderer layout={layout}></LayoutRenderer>;
}

Dengan cara ini, markup awal tetap konsisten, dan data baru hanya mengubah konten dalam container tanpa mengubah struktur utama.

Debugging Hydration Mismatch dan Tooling

Kalau masih muncul mismatch:

• Aktifkan React.StrictMode untuk mendeteksi efek samping yang terjadi dua kali saat mount.
• Gunakan logging if (process.env.NODE_ENV === 'development') agar data dan atribut yang berbeda dapat terdeteksi.
• Buka tab Network di browser devtools dan bandingkan HTML awal (view page source) dengan DOM saat hydration.
• Gunakan tracing di Next.js (next dev) untuk melihat apakah page menggunakan getServerSideProps atau fallback static.

Periksa terutama komponen yang menerima data dynamic. Jika masih ada perbedaan, gunakan console group seperti console.groupCollapsed('Layout mismatch') untuk mencatat props saat server dan client.

Kesimpulan

Menjaga konsistensi SSR/SSG ke CSR, membatasi perubahan state pada saat hydration, dan menyediakan fallback data asinkron adalah kunci agar UI container ala Davit tetap stabil. Kombinasikan pemeriksaan DOM, logging terstruktur, dan debugging Next.js untuk menangkap mismatch lebih awal. Dengan pendekatan tersebut, tampilan yang menarik tidak perlu mengorbankan keandalan render.