期望服务器 HTML 在 <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 />
)}

原文由 redochka 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

可能动态导入您的组件应该可以解决这个问题。以下是您可以参考的链接； https://nextjs.org/docs/advanced-features/dynamic-import

原文由 Zeeshan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

当我在 Next 项目中发生这种情况时，我没有正确嵌套我的 html 表格元素。具体来说，没有将我的 <tr> 包装在 <tbody>

原文由 user3236637 发布，翻译遵循 CC BY-SA 4.0 许可协议