Question

到目前为止，我一直在使用nextJS和material-ui取得了巨大的成功但是我最近遇到了一个概念问题：
每当应用程序在服务器上呈现时，我都不希望它一旦到达客户端就重新进行回流由于我在桌面和移动设备之间渲染的布局不同，我一直在使用<Hidden implementation='css'/>组件分离组件。我正在使用implementation=css，因为我不能依赖窗口宽度，因为它在服务器上不可用我今天的主要问题是桌面和移动版本都被渲染，即使屏幕上显示正确的版本，也会导致不必要的逻辑执行（尤其是api调用）。我想我做错了什么，但不知道如何解决它 “理想”的方式是像<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>

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

1 个答案: