带 SSR 的屏幕宽度?
Screen width with SSR?
我使用 NextJS 并且我需要在服务器端获取屏幕宽度,因为我有时需要在移动屏幕上渲染一个组件而在桌面屏幕上渲染另一个组件,但服务器只渲染桌面版本,因为它不能' t 检查屏幕宽度,但客户端可以这样做并在小屏幕上呈现另一个组件,我得到警告,服务器端和客户端的内容不匹配。如何在不使用设备但仅在服务器端显示屏幕宽度的情况下避免它?
最好的解决方案是使用 css 来控制您的组件,而不是 JS。
如您所述,您的服务器没有屏幕/ window 对象,因此它不会检测到任何宽度。
如果我建议,你最好使用@media-screen,并将showed/hidden组件的class放在特定数量的断点上。如果你使用 css 框架,你也可以使用他们的 classes.
我使用 NextJS 并且我需要在服务器端获取屏幕宽度,因为我有时需要在移动屏幕上渲染一个组件而在桌面屏幕上渲染另一个组件,但服务器只渲染桌面版本,因为它不能' t 检查屏幕宽度,但客户端可以这样做并在小屏幕上呈现另一个组件,我得到警告,服务器端和客户端的内容不匹配。如何在不使用设备但仅在服务器端显示屏幕宽度的情况下避免它?
最好的解决方案是使用 css 来控制您的组件,而不是 JS。
如您所述,您的服务器没有屏幕/ window 对象,因此它不会检测到任何宽度。
如果我建议,你最好使用@media-screen,并将showed/hidden组件的class放在特定数量的断点上。如果你使用 css 框架,你也可以使用他们的 classes.