Skip to content

Conversation

@arifnrrmdn
Copy link

Penjelasan Perubahan

Latar Belakang

Dalam Next.js (App Router), rendering dilakukan dua tahap:

  • Server-side rendering (SSR) menghasilkan HTML awal.
  • Client-side hydration membuat komponen menjadi interaktif.

Komponen client-only seperti react-hot-toast tidak dapat sepenuhnya dirender di server. Akibatnya, markup dari server dan client bisa berbeda sehingga muncul hydration mismatch warning.

Solusi

Menambahkan atribut suppressHydrationWarning pada elemen <html>:

<html lang="en" suppressHydrationWarning>

Alasan

  • Menghindari error/warning hydration akibat perbedaan render SSR dan client-side.
  • Komponen react-hot-toast bersifat client-only sehingga tidak bisa konsisten dirender di server.
  • Mengikuti best practice Next.js untuk kasus client-side component pada root layout.

Manfaat

  • ✅ Mencegah warning hydration yang mengganggu di console.
  • ✅ Menjaga stabilitas UI tanpa perbedaan tampilan antara server dan client.
  • ✅ Memperbaiki pengalaman developer dengan log yang lebih bersih.
  • ✅ Memperbesar kemungkinan pull request diterima karena sesuai rekomendasi komunitas.

@vercel
Copy link

vercel bot commented Aug 3, 2025

@arifnrrmdn is attempting to deploy a commit to the Zumaku's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant