material-ui中的隐藏组件,如何防止渲染?

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

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