reactjs - Material-ui中隐藏组件，如何防止渲染？

Question

到目前为止，我一直在使用 nextJS 和 Material-ui，并取得了巨大成功。
然而我最近遇到了一个概念问题:
每当应用程序在服务器上呈现时，我不希望它在到达客户端后进行重排。
由于我在桌面和移动设备之间渲染布局的方式不同，因此我一直使用 <Hidden implementation='css'/> 来分离组件。成分。我正在使用implementation=css因为我不能依赖窗口宽度，因为它在服务器上不可用。
我今天的主要问题是，桌面版和移动版都被渲染，即使屏幕上显示的是正确的，也会导致不必要的逻辑执行(尤其是 api 调用)。
我想我做错了什么，但不知道如何解决。
“理想”的方式是像 <Hidden/> 这样的组件但它不仅仅是隐藏已经渲染的组件，而是根本不会渲染它......而且我不能使用 window.innerWidth当然，因为我关心SSR...

如果有人有想法，我将不胜感激。

Answer 1

所以，我终于找到了适合我的情况的不是完美的，而是最佳的解决方案:
当渲染在服务器端完成时，我使用的是material-ui <Hidden implementation='css'/> (使用媒体查询 react 组件也可以实现同样的效果)，以​​便该组件同时渲染桌面和移动版本，然后立即隐藏正确的版本(屏幕上没有 flickr)。
然后，当客户端渲染完成时，我正在计算 window.innerWidth这样组件就不会为每次状态更改重新计算移动和桌面版本。
这是我的代码:

<Fragment>
  <Display format="mobile" css>
    {process.browser
      ? this.state.width < 960 ? mobile() : null
      : mobile()}
  </Display>
  <Display format="tablet-desktop" css>
    {process.browser
      ? this.state.width >= 960 ? tablet_desktop() : null
      : tablet_desktop()}
  </Display>
</Fragment>