預期服務器 HTML 包含匹配<tag>在<tag></tag></tag>

Question

我們正在使用 nextjs 並在頁面刷新（或首次加載）時收到此錯誤

我的錯誤是：

react-dom.development.js:88 Warning: Expected server HTML to contain a matching <tag> in <tag>.

我們功能組件的代碼如下所示：

export default MyComponent () {

  if(! props.something){  // ← this is causing the problem.
    return null;
  }

  return (
    <>
     HTML here ...
    </>
  )
}

據我了解，SSR 與客戶端渲染不同，這就是 react 抱怨的原因。

該應用程序運行正常，但此錯誤顯示在控制台中，我們不希望在那里引發很多錯誤，因為這可能會阻止我們在發生真正的錯誤時看到它們。

---

解決方案：

解決方案是使用動態導入並將組件調用包裝到：

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

//use it:
<MyDynamicComponent />

//OR :

const MyDynamicComponent = dynamic(() => import('./myComponent'))

//use it:
{typeof window !== 'undefined' && (
  <MyDynamicComponent />
)}

Answer 1

可能動態導入您的組件應該可以解決這個問題。 以下是您可以參考的鏈接； https://nextjs.org/docs/advanced-features/dynamic-import

Answer 2

我一直在尋找類似問題的解決方案，但我使用的是 react-window lib，問題似乎就在其中。 我向它傳遞了不同的高度，這取決於它是在服務器上還是在客戶端上加載，所以它給了我不同的元素。

我的解決方案是在開始時傳遞相同的高度，但在useEffect （=客戶端負載）上將其更改為window.innerHeight 。

Answer 3

當我在 Next 項目中發生這種情況時，我沒有正確嵌套 html 表元素。 具體來說，沒有將我的<tr>包裝在<tbody>中

Answer 4

在我的情況下，代碼首先在服務器上執行，然后在瀏覽器中執行，這就是為什么我收到此錯誤以及樣式組件的其他錯誤，例如： Warning: Prop類名did not match. Server: "CardUserInfo.... did not match. Server: "CardUserInfo....

所以這個鏈接幫助： https://github.com/vercel/next.js/discussions/17443在此處輸入鏈接描述，我的解決方案就像在這個討論中實現的 useState useEffect

 const [mount, setMount] = useState(false) useEffect(() => { setMount(true) }, [ ]) return mount&&( <InfoUserCard/>)

Answer 5

在我的情況下，控制台錯誤顯示Warning: Expected server HTML to contain a matching <sup> in <span>. 僅在開發中使用 Safari Web 瀏覽器，即localhost:3000 。 只需使用 Chrome Web 瀏覽器擺脫這個無聊的錯誤。

使用 Safari Web 瀏覽器在生產中不會存在這個無聊的錯誤。