期望服务器 HTML 在 <tag> 中包含匹配的 <tag>

Question

我们正在使用 nextjs 并在页面刷新（或首次加载）时收到此错误

\n\n

我的错误是：

\n\n

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

\n\n

我们的功能组件的代码如下所示：

\n\n

export default MyComponent () {\n\n  if(! props.something){  // \xe2\x86\x90 this is causing the problem.\n    return null;\n  }\n\n  return (\n    <>\n     HTML here ...\n    </>\n  )\n}\n

\n\n

根据我的理解，SSR 与客户端渲染不同，这就是 React 抱怨的原因。

\n\n

该应用程序工作正常，但此错误显示在控制台中，我们不希望在那里抛出许多错误，因为这可能会阻止我们在发生错误时看到真正的错误。

\n\n

---

\n\n

解决方案：

\n\n

解决方案是使用动态导入并将组件调用包装到：

\n\n

const MyDynamicComponent = dynamic(() => import('./myComponent'), {ssr: false});\n\n//use it:\n<MyDynamicComponent />\n\n//OR :\n\nconst MyDynamicComponent = dynamic(() => import('./myComponent'))\n\n//use it:\n{typeof window !== 'undefined' && (\n  <MyDynamicComponent />\n)}\n

\n

Answer 1

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