為什麼在Devtools中使用Remix的Indie堆疊初始化專案時會出現「Hydration failed」錯誤？

Question

當我學習Remix時，我按照教程初始化了一個項目，但是當我打開Devtools時，我發現控制台上報了幾個錯誤。警告：不希望伺服器HTML中包含

標籤在中。錯誤：水合失敗，因為初始UI與在伺服器上呈現的內容不符。 *n最荒謬的是，我打開了Remix的首頁，它的主頁也報了同樣的錯誤，所以我特別好奇水合是否成功以及為什麼會發生這個錯誤。

P粉043566314 · Answer

這是一個由瀏覽器擴充功能修改DOM引起的眾所周知的React問題。

在Remix中更明顯，因為它會渲染整個，而不僅僅是

。 
你可以透過使用沒有安裝擴充功能的瀏覽器設定檔（或隱身模式）來確認是否是由瀏覽器擴充功能引起的。 
Kiliman在這裡示範了一個解決方法：https://github.com/kiliman/remix-hydration-fix，它涉及分別渲染頭部和應用程式。

php8，我來也