當(dāng)服務(wù)器渲染的HTML與React的水合過(guò)程中的客戶端期望不匹配時(shí)，

1. 水合錯(cuò)誤發(fā)生，導(dǎo)致警告或UI問(wèn)題；核心修復(fù)程序是確保服務(wù)器和客戶端渲染之間的一致性。 2.避免根據(jù)客戶端數(shù)據(jù)（例如窗口或localstorage）的條件渲染，通過(guò)使用USESTATE和使用效率推遲此類(lèi)渲染，並在顯示特定於客戶端的內(nèi)容之前設(shè)置客戶端安裝的標(biāo)誌。 3。通過(guò)使用服務(wù)器端數(shù)據(jù)獲取方法（例如GetServersideProps）來(lái)確保服務(wù)器和客戶端都會(huì)收到相同的初始數(shù)據(jù)，從而防止異步數(shù)據(jù)不匹配。 4.通過(guò)將諸如時(shí)間戳（例如時(shí)間戳）（如服務(wù)器上的佔(zhàn)位符）初始化到服務(wù)器上的佔(zhàn)位符並在客戶端端安裝後更新它們，從而消除基於時(shí)間或隨機(jī)性的差異。 5.通過(guò)確保條件渲染依賴於SSR期間可用的數(shù)據(jù)來(lái)確保相同的HTML結(jié)構(gòu)，從而避免了由於環(huán)境之間的真實(shí)性而導(dǎo)致的DOM差異。 6。使用使用效應(yīng)將第三方腳本或小部件的加載加載到客戶端，以防止水合後意外的DOM突變。 7。遵循最佳實(shí)踐：獲取數(shù)據(jù)服務(wù)器端，避免使用初始UI邏輯，對(duì)齊初始狀態(tài)，更喜歡CSS而不是JavaScript來(lái)響應(yīng)響應(yīng)，並使用抑制性水平進(jìn)行不可避免的不匹配。通過(guò)確保服務(wù)器和客戶端呈現(xiàn)相同的輸出或遞延客戶端內(nèi)容，直到水合後，可以解決大多數(shù)水合問(wèn)題。

服務(wù)器端渲染（SSR）應(yīng)用程序（例如使用Next.js，Nuxt.js或與SSR構(gòu)建的應(yīng)用程序）為更快的初始負(fù)載和更好的SEO提供。但是它們帶有一個(gè)常見(jiàn)的陷阱：水合錯(cuò)誤。當(dāng)服務(wù)器渲染的HTML與客戶端在React（或Vue等）水合階段的期望不匹配時(shí)，就會(huì)發(fā)生這些。結(jié)果？ DEV，潛在的UI故障甚至完全組件故障的警告。

讓我們分解導(dǎo)致水合不匹配的原因以及如何修復(fù)它們。

什麼是水合，為什麼失敗？

水合是客戶端JavaScript框架“附加”服務(wù)器上生成的靜態(tài)HTML的交互性的過(guò)程。 React將服務(wù)器渲染的DOM結(jié)構(gòu)與其期望在客戶端上呈現(xiàn)的內(nèi)容進(jìn)行了比較。如果有不匹配，React會(huì)試圖調(diào)和它 - 通常帶有這樣的警告：

警告：文本內(nèi)容不匹配。服務(wù)器：“加載...”客戶端：“您好，用戶”

這種不匹配破壞了SSR的假設(shè)依賴於錯(cuò)誤，並可能導(dǎo)致錯(cuò)誤或性能問(wèn)題。

常見(jiàn)原因以及如何修復(fù)它們

1。基於僅客戶數(shù)據(jù)的條件渲染

最常見(jiàn)的罪魁禍?zhǔn)字皇怯伸稙g覽器特定的API（例如window ， localStorage或navigator ），在服務(wù)器與客戶端上渲染不同的內(nèi)容。

功能mycomponent（）{
  const [ismobile，setismobile] = usestate（false）;

  useeffect（（）=> {
    setismobile（window.innerwidth <768）;
  }，[]）;

  返回<div> {ismobile？ &#39;移動(dòng)視圖&#39;：&#39;桌面視圖&#39;} </div>;
}

問(wèn)題：在服務(wù)器上， window不確定，因此isMobile開(kāi)始為false 。但是在客戶端上， useEffect運(yùn)行→水合不匹配後可能是true 。

解決方案：延遲渲染直到安裝後，或使用兩通渲染：

功能mycomponent（）{
  const [isclient，setisclient] = usestate（false）;

  useeffect（（）=> {
    setisclient（true）;
  }，[]）;

  如果（！isclient）{
    返回<div>加載... </div>; //或無(wú)效，或靜態(tài)佔(zhàn)位符
  }

  返回<div> {window.innerwidth <768？ &#39;Mobile&#39;：&#39;桌面&#39;} </div>;
}

或者，使用基於useEffect的檢測(cè)或響應(yīng)式設(shè)計(jì)系統(tǒng)（CSS媒體查詢）之類(lèi)的助手，以避免基於JS的渲染決策。

2。解決得太晚的異步數(shù)據(jù)

如果您的組件在等待數(shù)據(jù)時(shí)呈現(xiàn)不同的內(nèi)容（例如，加載狀態(tài)），但是服務(wù)器無(wú)法正確模擬該狀態(tài)，則會(huì)發(fā)生不匹配。

函數(shù)用戶forprofile（{userId}）{
  const [用戶，setuser] = usestate（null）;

  useeffect（（）=> {
    fetchuser（userId）。然後（setuser）;
  }， [用戶身份]）;

  返回用戶？ <h1> {user.name} </h1>：<p>加載... </p>;
}

問(wèn)題：服務(wù)器可能會(huì)渲染“加載...”，但是如果客戶端狀態(tài)以null為單位，React期望“加載...”，則可能匹配。但是，如果客戶端獲取從緩存中立即解決，則可以跳到名稱(chēng)→不匹配。

更好的方法：使用Frameworks的內(nèi)置數(shù)據(jù)獲?。?getServerSideProps ， load等）在服務(wù)器上獲取數(shù)據(jù)並將其作為道具傳遞。

 // Next.js示例
導(dǎo)出異步函數(shù)getServersideProps（）{
  const user =等待fetchuser（）;
  返回{props：{user}};
}

函數(shù)用戶forprofile（{user}）{
  返回<h1> {user.name} </h1>;
}

現(xiàn)在，服務(wù)器和客戶端都呈現(xiàn)同一件事 - 不匹配。

3。基於時(shí)間或隨機(jī)性的動(dòng)態(tài)內(nèi)容

功能時(shí)鐘（）{
  const time = new Date（）。 tolocaletimestring（）;
  返回<div> {time} </div>;
}

問(wèn)題：服務(wù)器呈現(xiàn)時(shí)間，客戶端呈現(xiàn)略有不同的→不匹配。

解決方案：在服務(wù)器上渲染一個(gè)佔(zhàn)位符並用正確的值進(jìn)行補(bǔ)充：

功能時(shí)鐘（）{
  const [time，settime] = usestate（new Date（）。tolocaletimestring（））;

  useeffect（（）=> {
    const Intertal = setInterval（（）=> {
      Settime（new Date（）。tolocaletimestring（））;
    }，1000）;
    return（）=> clear Interval（Interval）;
  }，[]）;

  返回<div> {time} </div>;
}

但是請(qǐng)注意：初始狀態(tài)仍然使用new Date() ，該（）在服務(wù)器和客戶端都運(yùn)行。如果時(shí)間安排非常接近，則可能匹配。為了嚴(yán)格的一致性，請(qǐng)考慮將狀態(tài)初始化為佔(zhàn)位持有人，而僅在Mount上進(jìn)行更新。

 const [time，settime] = usestate（'...'）;

4。不匹配的HTML結(jié)構(gòu)

即使是標(biāo)記的小差異也可能觸發(fā)警告：

 {用戶&& <p>歡迎，{user.name} </p>}

如果user在服務(wù)器上是null ，但在客戶端（或VICE反之亦然）上，DOM結(jié)構(gòu)有所不同。

修復(fù)：確保在SSR期間可用條件渲染中使用的數(shù)據(jù)。使用數(shù)據(jù)獲取來(lái)解決服務(wù)器上的此類(lèi)道具。

另外，除非必要，否則避免根據(jù)環(huán)境渲染不同的組件。

5。第三方腳本或小部件

注入內(nèi)容（廣告，聊天機(jī)器人，分析）的庫(kù)通常會(huì)在水合後修改DOM，這是不期望的。

解決方案：僅在客戶端和水合後加載此類(lèi)腳本：

 useeffect（（）=> {
  const script = document.createelement（'script'）;
  script.src ='https://example.com/widget.js';
  document.body.body.appendchild（腳本）;
}，[]）;

將組件包裝在useClient或isClient電力器中，以防止SSR渲染。

避免補(bǔ)水錯(cuò)誤的最佳實(shí)踐

• ?盡可能在服務(wù)器上獲取數(shù)據(jù)（SSR友好的數(shù)據(jù)加載）。
• ?避免使用可見(jiàn)UI的初始渲染邏輯的useEffect 。
• ?使用useEffect設(shè)置一個(gè)“已安裝”標(biāo)誌，並有條件地呈現(xiàn)僅限客戶端內(nèi)容。
• ?匹配服務(wù)器和客戶端上的初始狀態(tài)- 在渲染過(guò)程中不要依賴瀏覽器API。
• ?利用CSS進(jìn)行響應(yīng)行為，而不是基於JS的渲染。
• ?使用suppressHydrationWarning={true}很少（僅在直接不匹配下您無(wú)法修復(fù)）。

 <Div DiscresshydrationWarning>
  {Math.random（）}
</div>

這抑制了警告，但沒(méi)有解決根本問(wèn)題 - 謹(jǐn)慎使用。

水合錯(cuò)誤通常是假設(shè)服務(wù)器 - 客戶差異的癥狀。通過(guò)使雙方呈現(xiàn)的內(nèi)容（或優(yōu)雅地推遲特定於客戶的渲染）對(duì)齊您可以消除大多數(shù)問(wèn)題。

基本上：如果無(wú)法在服務(wù)器上完成，請(qǐng)不要讓它影響初始渲染。

以上是解決服務(wù)器端渲染應(yīng)用程序中的水合錯(cuò)誤的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！