Aplikasi yang diberikan oleh pelayan (SSR)-seperti yang dibina dengan Next.js, nuxt.js, atau bertindak balas dengan SSR-menawarkan beban awal yang lebih cepat dan SEO yang lebih baik. Tetapi mereka datang dengan gotcha biasa: kesilapan penghidratan . Ini berlaku apabila HTML yang diberikan pelayan tidak sepadan dengan apa yang diharapkan oleh klien semasa fasa penghidratan React (atau VUE, dan lain-lain). Hasilnya? Amaran di dev, potensi gangguan UI, atau kegagalan komponen penuh.

Mari kita pecahkan apa yang menyebabkan ketidakcocokan penghidratan dan bagaimana untuk memperbaikinya.

Apakah penghidratan dan mengapa ia gagal?

Penghidratan adalah proses di mana rangka kerja JavaScript sisi klien "melampirkan" interaktiviti ke HTML statik yang dihasilkan pada pelayan. React membandingkan struktur DOM yang diberikan pelayan dengan apa yang diharapkan untuk memberi klien. Sekiranya ada ketidakcocokan, React cuba mendamaikannya -sering dengan amaran seperti:

Amaran: Kandungan teks tidak sepadan. Pelayan: "Memuatkan ..." Pelanggan: "Hello, Pengguna"

Kesilapan ini memecahkan andaian SSR bergantung kepada dan boleh menyebabkan masalah bug atau prestasi.

Penyebab biasa dan bagaimana membetulkannya

1. Rendering bersyarat berdasarkan data pelanggan sahaja

Salah satu penyebab yang paling kerap adalah memberikan kandungan yang berbeza pada pelayan vs klien kerana API spesifik pelayar (seperti window , localStorage , atau navigator ).

 fungsi myComponent () {
  const [isMobile, setismobile] = useState (false);

  useeffect (() => {
    setismobile (window.innerWidth <768);
  }, []);

  kembali <div> {isMobile? &#39;Paparan mudah alih&#39;: &#39;paparan desktop&#39;} </div>;
}

Masalah : Pada pelayan, window tidak ditentukan, jadi isMobile bermula sebagai false . Tetapi pada pelanggan, ia mungkin true selepas useEffect berjalan → ketidakcocokan penghidratan.

Penyelesaian : Rendering kelewatan sehingga selepas dilancarkan, atau gunakan render dua lulus:

 fungsi myComponent () {
  const [isClient, setIsclient] = useState (false);

  useeffect (() => {
    setIsclient (benar);
  }, []);

  jika (! isclient) {
    kembali <div> memuatkan ... </div>; // atau batal, atau pemegang tempat statik
  }

  kembali <div> {window.innerwidth <768? &#39;Mudah alih&#39;: &#39;desktop&#39;} </div>;
}

Sebagai alternatif, gunakan penolong seperti pengesanan berasaskan useEffect atau sistem reka bentuk responsif (pertanyaan media CSS) untuk mengelakkan keputusan rendering berasaskan JS.

2. Data Asynchronous yang terlambat

Jika komponen anda membuat kandungan yang berbeza semasa menunggu data (misalnya, keadaan pemuatan), tetapi pelayan tidak mensimulasikan keadaan itu dengan betul, ketidakcocokan berlaku.

 fungsi userProfile ({userId}) {
  const [pengguna, setUser] = useState (null);

  useeffect (() => {
    fetchUser (userId) .then (setUser);
  }, [userId]);

  Pulangan Pengguna? <h1> {user.name} </h1>: <p> Memuatkan ... </p>;
}

Masalah : Pelayan mungkin membuat "memuatkan ...", tetapi jika keadaan klien bermula sebagai null , React mengharapkan "memuatkan ...", jadi ia mungkin sepadan. Tetapi jika pelanggan mengambil menyelesaikan dengan serta-merta dari cache, ia boleh melompat ke nama → ketidakcocokan.

Pendekatan yang lebih baik : Gunakan pengambilan data terbina dalam Rangka Kerja ( getServerSideProps , load , dan lain-lain) untuk mengambil data pada pelayan dan lulus sebagai prop.

 // Contoh Next.js
Eksport fungsi async geterversideProps () {
  const user = menunggu perapan ();
  kembali {props: {user}};
}

fungsi userProfile ({user}) {
  kembali <h1> {user.name} </h1>;
}

Kini kedua -dua pelayan dan klien memberikan perkara yang sama -tidak sepadan.

3. Kandungan dinamik berdasarkan masa atau rawak

 jam fungsi () {
  const time = tarikh baru (). ToloCaleTimeString ();
  kembali <div> {time} </div>;
}

Masalah : Pelayan membuat masa, klien membuat sedikit berbeza → ketidakcocokan.

Penyelesaian : Membuat pemegang tempat di pelayan dan menghidrat dengan nilai yang betul:

 jam fungsi () {
  const [masa, setTime] = useState (tarikh baru (). TolocaleTimeString ());

  useeffect (() => {
    selang const = setInterval (() => {
      setTime (tarikh baru (). TolocaleTimeString ());
    }, 1000);
    kembali () => clearInterval (selang);
  }, []);

  kembali <div> {time} </div>;
}

Tetapi nota: keadaan awal masih menggunakan new Date() , yang berjalan pada kedua -dua pelayan dan klien. Jika masa sangat dekat, ia mungkin sepadan. Untuk konsistensi yang ketat, pertimbangkan untuk memulakan keadaan kepada pemegang tempat dan mengemas kini hanya pada gunung.

 const [masa, setTime] = useState ('...');

4. Struktur HTML yang tidak sesuai

Walaupun perbezaan kecil dalam markup boleh mencetuskan amaran:

 {user && <p> selamat datang, {user.name} </p>}

Jika user null pada pelayan tetapi kebenaran pada klien (atau sebaliknya), struktur DOM berbeza.

Betulkan : Pastikan data yang digunakan dalam rendering bersyarat boleh didapati semasa SSR. Gunakan pengambilan data untuk menyelesaikan alat peraga tersebut pada pelayan.

Juga, elakkan membuat komponen yang berbeza berdasarkan persekitaran kecuali perlu.

5. skrip atau widget pihak ketiga

Perpustakaan yang menyuntik kandungan (iklan, chatbots, analisis) sering mengubah suai DOM selepas penghidratan, yang bertindak balas tidak diharapkan.

Penyelesaian : Muat skrip tersebut hanya pada pelanggan dan selepas penghidratan:

 useeffect (() => {
  const script = document.createElement ('script');
  script.src = 'https://example.com/widget.js';
  document.body.appendchild (skrip);
}, []);

Balut komponen dalam Pengawal useClient atau isClient untuk mencegah rendering SSR.

Amalan terbaik untuk mengelakkan kesilapan penghidratan

• ? Ambil data pada pelayan apabila mungkin (pemuatan data yang mesra SSR).
• ? Elakkan useEffect untuk logik rendering awal yang mengubah UI yang kelihatan.
• ? Gunakan useEffect untuk menetapkan bendera "dipasang" dan menetapkan kandungan pelanggan sahaja.
• ? Padankan keadaan awal pada pelayan dan klien -tidak bergantung pada API pelayar semasa membuat.
• ? memanfaatkan CSS untuk tingkah laku responsif dan bukannya rendering berasaskan JS.
• ? Gunakan suppressHydrationWarning={true} dengan berhati -hati (hanya pada ketidakpadanan langsung yang anda tidak dapat diperbaiki).

 <div suppresshydrationwarning>
  {Math.random ()}
</div>

Ini menindas amaran tetapi tidak membetulkan isu asas -gunakannya dengan berhati -hati.

Kesilapan penghidratan sering gejala penyimpangan klien pelayan dalam andaian. Dengan menyelaraskan apa yang diberikan di kedua-dua belah pihak-atau dengan anggun menangguhkan rendering khusus pelanggan-anda boleh menghapuskan kebanyakan isu.

Pada asasnya: jika ia tidak dapat dilakukan di pelayan, jangan biarkan ia mempengaruhi render awal .

Atas ialah kandungan terperinci Menyelesaikan kesilapan penghidratan dalam aplikasi yang diberikan oleh pelayan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!