到目前为止，我一直在使用nextJS和material-ui取得巨大成功。
但是，最近我遇到了一个概念性的问题：
每当应用程序在服务器上呈现时，我都不希望它在到达客户端时就进行重排。
由于我在台式机和移动设备之间渲染布局的方式有所不同，因此我一直在使用这些<Hidden implementation='css'/>组件来分离组件。我implementation=css之所以使用，是因为我不能依赖窗口宽度，因为它在服务器上将不可用。
我今天的主要问题是，即使在屏幕上显示了正确的版本，也呈现了桌面版本和移动版本，这会导致不必要的逻辑执行（尤其是api调用）。
我认为我做错了什么，但不知道如何解决。
'理想'的方式将是一个类似的组件，<Hidden/>而不是仅仅隐藏一个已经渲染的组件，它根本不会渲染它。而且window.innerWidth由于我关心SSR，所以我当然不能使用...
如果有人有想法，我将不胜感激。
因此，我最终发现不是一个完美的解决方案，而是针对我的情况的最佳解决方案：
当渲染在服务器端完成时，我正在使用material-ui <Hidden implementation='css'/>（使用media-query 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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句