Cara Menyelesaikan Ralat Penghidratan dalam Next.js

"Penghidratan gagal kerana HTML yang diberikan pelayan tidak sepadan dengan klien...."

Jika anda telah menggunakan Next.js untuk membina aplikasi, anda mesti mendapat ralat di atas atau sesuatu yang serupa. Ia dipanggil Ralat Penghidratan.

Saya pernah mendapat ralat ini semasa mula-mula menggunakan Next.js tetapi tidak tahu apa yang perlu dilakukan dan tidak pernah peduli untuk mencarinya kerana ia tidak menjejaskan kod saya pada masa itu. Tidak sehingga saya ditanya oleh penemuduga, perkara yang saya akan lakukan untuk menyelesaikan ralat penghidratan dalam Next.js. Saya terkedu kerana sekarang ini bukan kes penemuduga yang cuba menjatuhkan saya, tetapi kes acuh tak acuh dan kejahilan semata-mata. Saya tidak mahu anda menjadi seperti saya dalam temuduga seterusnya. Jadi mari kita bincang tentang Penghidratan.

Penghidratan ialah proses di mana HTML statik menjadi interaktif dengan menambahkan Javascript padanya. Jadi biasanya apabila halaman web dipaparkan pada pelayan, ia kehilangan interaktiviti dan pengendali acara sebelum sampai kepada pelanggan. React bertanggungjawab membina pokok komponen pada klien. Ini dipanggil penghidratan, kerana ia menambahkan interaktiviti dan pengendali acara yang hilang apabila HTML diberikan bahagian pelayan. React membandingkannya dengan DOM yang diberikan sebelah pelayan sebenar. Mereka mestilah sama supaya React boleh menerima pakainya.

Jika terdapat ketidakpadanan antara halaman yang kami ada dan perkara yang difikirkan oleh pihak pelanggan yang sepatutnya kami miliki, kami mendapat "Ralat Penghidratan." Beberapa punca ralat penghidratan yang biasa termasuk: Sarang elemen HTML yang salah, data berbeza digunakan untuk pemaparan, menggunakan API pelayar sahaja, kesan sampingan, dsb.

Walau apa pun puncanya, anda perlu memikirkannya dengan membaca mesej ralat yang anda dapat. Penyelesaian yang mungkin termasuk;

1. Menggunakan useEffect untuk dijalankan pada klien sahaja.
Untuk mengelakkan ketidakpadanan penghidratan, pastikan komponen memaparkan kandungan yang sama pada bahagian pelayan seperti yang dilakukan pada pemaparan bahagian klien awal. Anda boleh menggunakan cangkuk useEffect untuk memaparkan kandungan pada klien dengan sengaja. Lihat contoh di bawah:

import { useState, useEffect } from 'react'

export default function App() {
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true)
  }, [])

  return <h1>{isClient ? 'This is never prerendered' : 'Prerendered'}</h1>
}

2. Melumpuhkan pemaparan sebelah pelayan pada komponen tertentu.
Anda boleh menggunakan ciri lumpuhkan prapaparan pada Next.js pada komponen tertentu. Ini boleh mengelakkan ketidakpadanan penghidratan. Lihat contoh di bawah:

import dynamic from 'next/dynamic'

const NoSSR = dynamic(() => import('../components/no-ssr'), { ssr: false })

export default function Page() {
  return (
    <div>
      <NoSSR />
    </div>
  )
}

3. Menggunakan Amaran Suppress Hydration
Ada kalanya kandungan pasti akan berbeza pada pelayan dan klien, contoh seperti cap waktu. Perkara yang boleh anda lakukan ialah menyenyapkan amaran ketidakpadanan penghidratan dengan menambahkan suppressHydrationWarning={true} pada elemen.

Jadi dengan ketiga-tiga kaedah ini, anda sepatutnya dapat menyelesaikan ralat penghidratan itu pada kali berikutnya ia muncul semasa membina Next.js.

Jangan lupa melanggan halaman saya untuk mendapatkan lebih banyak kandungan yang membuka mata tentang Pengaturcaraan.

Atas ialah kandungan terperinci Cara Menyelesaikan Ralat Penghidratan dalam Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!