React: Bagaimana Cara Mengatasi Error "Warning: Text content did not match."?

Pesan kesalahan seperti itu ngasih tau kita bahwa ada content HTML yang dirender di client tidak cocok dengan teks yang disajikan server.

Untuk melihat HTML asli yang dikirim oleh server (sebelum dievaluasi dan dihidrasi di browser) buka alamat berikut dibrowser: view-source:https:www.example.com/page ganti https:www.example.com/page dengan halaman yang bermasalah.

Cari teks yang dimaksud dalam pesan kesalahan di bagian server pakai CTRL + F. Setelah dapet teks server, bandingkan dengan yang terlihat dilayar (buka halaman tanpa view-source:).

Ini biasanya terjadi pada tanggal, dilokal tidak menimbulkan masalah karena timezone nodejs biasanya sama dengan timezone komputer yang digunakan browser kita.

Tapi di server timezone nya biasanya menggunakan UTC, oleh karena itu karena proses hidrasi terjadi di browser maka tanggal juga akan dievaluasi di browser (client) yang mana timezonenya bisa berbeda.

Untuk mengatasinya tambahkan atribut suppressHydrationWarning ke tag HTML yang berisi konten bermasalah, misalnya:

function Time() {
  return <time suppressHydrationWarning>{new Date().toLocaleString()}</time>;
}

Ini sesuai dengan rekomendasi React maupun Next.js.

package main

import "fmt"

func main() {
  fmt.Println("hello")
}