material-ui中的隐藏组件，如何防止渲染？

Question

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

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

Answer 1

所以，我终于找到了适合我的情况的最佳解决方案：
当渲染完成服务器端时，我使用 material-ui <Hidden implementation='css'/> （同样可以通过媒体查询反应组件实现），以便组件同时呈现桌面版和移动版，然后立即隐藏右边的（屏幕上没有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>

material-ui中的隐藏组件，如何防止渲染？

hidden component in material-ui, how to prevent rendering?

reactjs

material-ui

nextjs