React Academy · Pelajaran

Ralat Hidrasi: Punca & Penyelesaian

Kenal pasti ketidakpadanan antara HTML pelayan dan klien serta baikinya dengan suppressHydrationWarning.

Pelajaran 2 daripada 413 langkah

Ralat Hidrasi: Punca & Penyelesaian ialah pelajaran React Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Academy merangkumi sejumlah 4 pelajaran.

Apakah Ralat Penghidratan?

Ralat penghidratan berlaku apabila HTML yang dipaparkan oleh React pada pelayan tidak sepadan dengan DOM maya yang dijangka React pada klien. React mencatat amaran dan memaparkan semula komponen dari awal, lalu menyebabkan kelipan.

Punca Biasa 1: Nilai Rawak

Menggunakan Math.random(), Date.now() atau crypto.randomUUID() semasa pemaparan menghasilkan nilai yang berbeza pada pelayan dan klien.

// Bad — different on server vs client:
<div id={Math.random().toString()}>...</div>

// Fix — use useId() (stable across server/client):
import { useId } from 'react';
function Component() {
  const id = useId();
  return <div id={id}>...</div>;
}

Punca Biasa 2: API Khusus Pelayar

Membaca localStorage, window.innerWidth atau navigator semasa pemaparan menyebabkan ranap pada pelayan atau menghasilkan nilai yang berbeza.

// Bad — localStorage doesn't exist on server:
<div>{localStorage.getItem('theme')}</div>

// Fix — read in useEffect (client-only):
const [theme, setTheme] = useState('light');
useEffect(() => {
  setTheme(localStorage.getItem('theme') ?? 'light');
}, []);

Punca Biasa 3: Pemformatan Tarikh/Masa

Pemformatan tarikh yang peka terhadap lokaliti menghasilkan rentetan yang berbeza pada pelayan (lokaliti UTC/Node) dan klien (lokaliti pelayar).

// Risky — locale may differ:
<time>{new Date().toLocaleDateString()}</time>

// Fix — use a consistent locale:
<time>{new Date().toLocaleDateString('en-US', { timeZone: 'UTC' })}</time>

Punca Biasa 4: Penyusunan Bersarang HTML Tidak Sah

React menjana HTML klien daripada DOM maya, tetapi penyusunan HTML tidak sah (contohnya, <p> di dalam <p>) menyebabkan pelayar menyusun semula DOM secara berbeza, lalu menyebabkan ketidakpadanan.

// Bad — browser auto-closes the nested <p>:
<p>Outer <p>Inner</p> text</p>

// Fix — use <div> or correct semantic elements:
<div>Outer <p>Inner</p> text</div>

Punca Biasa 5: Pemaparan Bersyarat Berdasarkan Keadaan

Komponen yang memaparkan kandungan secara berbeza berdasarkan keadaan yang hanya terdapat pada klien (seperti pengesahan pengguna atau lebar skrin) tidak sepadan kerana pelayan memaparkan kandungan tanpa keadaan itu.

// Bad — server renders 'Guest', client re-renders 'Alice' immediately:
<h1>{user?.name ?? 'Guest'}</h1>

// Fix — use a mounted guard to defer client-only rendering:
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
if (!mounted) return <h1>Guest</h1>; // match server output

suppressHydrationWarning

Gunakan suppressHydrationWarning pada elemen yang perbezaannya disengajakan (contohnya, cap waktu yang diformat pada klien). Ia menyekat amaran hanya untuk elemen itu.

<time suppressHydrationWarning dateTime={isoDate}>
  {new Date(isoDate).toLocaleString()}
</time>

Import Dinamik dengan ssr: false

Dalam Next.js, gunakan dynamic(fn, { ssr: false }) untuk menghalang komponen daripada dipaparkan pada pelayan sepenuhnya — sekali gus menghapuskan ketidakpadanan penghidratan bagi komponen yang hanya digunakan pada klien.

import dynamic from 'next/dynamic';

const ClientOnlyChart = dynamic(() => import('./Chart'), { ssr: false });

export default function Dashboard() {
  return <ClientOnlyChart />; // only renders in the browser
}

Menyahpepijat Ralat Penghidratan

React 18 mencatat mesej ralat penghidratan yang terperinci dalam mod pembangunan, dengan menunjukkan ketidakpadanan nod DOM yang tepat. Gunakan DevTools pelayar untuk memeriksa HTML pelayan berbanding pepohon React.

useId untuk Pengenal Stabil

useId() menjana pengenal yang stabil dan unik serta konsisten antara pemaparan pelayan dan klien — gunakan pengenal ini untuk pasangan id/htmlFor dan atribut ARIA.

function FormInput({ label }: { label: string }) {
  const id = useId();
  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <input id={id} />
    </div>
  );
}

Menguji Ralat Penghidratan

Jalankan aplikasi Next.js dalam mod pembangunan (npm run dev) dan perhatikan konsol pelayar. Ketidakpadanan penghidratan muncul sebagai amaran merah dengan surih tindanan komponen.

Semakan Pantas

Apakah cara terbaik untuk membaiki komponen yang memaparkan kandungan secara berbeza pada pelayan dan klien kerana membaca daripada localStorage?

Jawab dalam pelajaran interaktif

Imbas Kembali

Ketidakpadanan penghidratan berpunca daripada nilai rawak, API khusus pelayar, pemformatan peka lokaliti, penyusunan HTML tidak sah dan pemaparan bersyarat khusus klien. Baiki dengan useId(), gunakan useEffect untuk keadaan khusus klien, suppressHydrationWarning untuk perbezaan yang disengajakan dan dynamic({ ssr: false }) untuk komponen khusus klien.

Percuma untuk bermula

Pelajari React dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 88
Pelajaran: 324

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Ralat Hidrasi: Punca & Penyelesaian” percuma?

Ya — teks penuh “Ralat Hidrasi: Punca & Penyelesaian” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus React Academy, tingkat taraf kepada CoddyKit PRO. Kursus React Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Ralat Hidrasi: Punca & Penyelesaian”?

Kenal pasti ketidakpadanan antara HTML pelayan dan klien serta baikinya dengan suppressHydrationWarning. Anda berlatih React Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan React Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Ralat Hidrasi: Punca & Penyelesaian” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Cara SSR React Berfungsi di Sebalik Tabir
Ralat Hidrasi: Punca & Penyelesaian
Hidrasi Terpilih & Penstriman HTML
Corak Seni Bina Pulau

← Kembali ke React Academy