javascript - 预期的服务器 HTML 在 中包含匹配的

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