为什么我在 Next.js 中使用响应式条件渲染时会出现渲染失真错误？
Why am i getting render distortion bugs with responsive conditional rendering in Next.js?
我的 DOM 中有条件渲染，仅在遇到移动断点时才渲染。但是我的网页仍然显示或不显示那些不应显示或页面完全扭曲的条件组件。
据此blog:
The server doesn’t recognize the window neither document. This means that the device, in other words, cannot detect obligatory properties (such as the viewport dimensions of the client) - thereby it needs to infer them someway, which means, a pretty limited and non-accurate way to respond.
For instance, imagine we’ve an application that uses matchMedia
(which, as you probably know, is a Web API that arrives on top of
thewindow) to render components conditionally based on the viewport
dimensions. How would you expect the server to render the markup
without thewindow, and even if it’s hypothetically polyfilled somehow,
what about the dimensions? How would it respond once the initial
render contains a responsive component that conditionally affected by
a breakpoint?
Put it simply - this might cause the server to render our application
incorrectly, which eventually, leads to partial hydration that patches
the mismatches (namely potential bugs?).
换句话说，由于是服务器端，它无法访问您的屏幕尺寸。因此，最稳健的方法是简单地使用 css 媒体查询来有条件地渲染组件。
我的 DOM 中有条件渲染，仅在遇到移动断点时才渲染。但是我的网页仍然显示或不显示那些不应显示或页面完全扭曲的条件组件。
据此blog:
The server doesn’t recognize the window neither document. This means that the device, in other words, cannot detect obligatory properties (such as the viewport dimensions of the client) - thereby it needs to infer them someway, which means, a pretty limited and non-accurate way to respond.
For instance, imagine we’ve an application that uses matchMedia (which, as you probably know, is a Web API that arrives on top of thewindow) to render components conditionally based on the viewport dimensions. How would you expect the server to render the markup without thewindow, and even if it’s hypothetically polyfilled somehow, what about the dimensions? How would it respond once the initial render contains a responsive component that conditionally affected by a breakpoint?
Put it simply - this might cause the server to render our application incorrectly, which eventually, leads to partial hydration that patches the mismatches (namely potential bugs?).
换句话说，由于是服务器端，它无法访问您的屏幕尺寸。因此，最稳健的方法是简单地使用 css 媒体查询来有条件地渲染组件。