【发布时间】：2020-10-05 08:30:07
【问题描述】：
我使用 NextJS，我需要在服务器端获取屏幕宽度，因为当我需要在移动屏幕上渲染一个组件而在桌面屏幕上渲染另一个组件时，服务器只渲染桌面版本，因为它无法检查屏幕宽度，但客户端可以做到这一点并在小屏幕上呈现另一个组件，我收到警告，服务器端和客户端的内容不匹配。如何在不使用设备的情况下避免它，而仅在服务器端使用屏幕宽度？
【问题讨论】：
标签： reactjs next.js server-side-rendering
【发布时间】：2020-10-05 08:30:07
【问题描述】：
最好的解决方案是使用 css 来控制你的组件，而不是 JS。
正如你所提到的，你的服务器没有屏幕/窗口对象，所以它不会检测到任何宽度。
如果我可以建议，您最好使用@media-screen，并将显示/隐藏组件的类放在特定数量的断点上。如果你使用 css 框架，你也可以使用他们的类。
【讨论】：
-
是的，但我需要根据屏幕宽度更改一些逻辑行为，因此在这种情况下 css 媒体查询不适合我:(
-
如您所知，只能在客户端检测窗口对象仅意味着您的应用在客户端呈现时可以获得屏幕宽度。