NextJS 和响应式设计

Posted 2023-04-14

【中文标题】NextJS 和响应式设计

【英文标题】：NextJS and Responsive Design

【发布时间】：2018-08-30 01:57:08

【问题描述】：

我使用 create-react-app 开发了一个相当大的单页应用程序。 我正在将所有内容迁移到 NextJS，主要用于 SEO。 我在一个问题上摸不着头脑：处理响应式设计的最佳方式是什么？ 在我的 create-react-app 遗留代码中，我始终使组件与 window.innerWidth 保持同步，并使用它来处理大部分响应性（由 material-ui 处理的网格布局除外）。 但是由于我们无法在服务器渲染期间猜测客户端的宽度，那么如何避免 UI 的“闪烁”呢？ 我们是否需要延迟任何响应式 UI 逻辑，直到我们可以在客户端上执行？

【问题讨论】：

您可能需要使用 css 媒体查询 w3schools.com/css/css_rwd_mediaqueries.asp 重写响应式设计。由于性能问题，不应使用 javascript 来管理响应式。

这完全有道理，谢谢！我的响应式设计混合了 ui 框架（material-ui）、媒体查询（css 文件和 aphrodite），然后是一些 JS。我会检查我的代码并清理所有内容。

是的.. 最好早点做。提醒我以前项目的所有不好的回忆......

【参考方案1】：

解决办法是： 使用 javascript 来处理响应性是不好的做法，如果我们不想让浏览器重新显示屏幕上的内容，则应该使用 css。 如果您使用的是material-ui，请查看this page

【讨论】：

这不一定是真的。在某些用例中，由于代码拆分，有条件地渲染组件可以允许更小的包大小。确实存在权衡，但我不会说这是不好的做法（不再）。您只需要考虑更多的事情（例如根据设备类型为服务器上的屏幕/设备宽度赋值）并注意如果未正确处理 s-s-r 可能会出现的边缘情况。

@JeremyHindle 有条件地渲染组件是一件好事，但我认为人们切换到 s-s-r 以获得更好的 SEO，如果为了有条件地渲染您的组件根本没有渲染，这可能会影响 SEO。此外，如果您看到 withWidth HOC 将很快被弃用，那么请支持 useMediaQuery 来克服我刚才所说的条件渲染。更好的答案是根据需要明智地选择。

链接失效