NextJS 和响应式设计答案

【问题标题】：NextJS and Responsive DesignNextJS 和响应式设计
【发布时间】：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。我会检查我的代码并清理所有内容。
是的.. 最好早点做。提醒我以前项目的所有不好的回忆......

标签： reactjs material-ui server-side-rendering nextjs

【解决方案1】：

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

【讨论】：

这不一定是真的。在某些用例中，由于代码拆分，有条件地渲染组件可以允许更小的包大小。确实存在权衡，但我不会说这是不好的做法（不再）。您只需要考虑更多的事情（例如根据设备类型为服务器上的屏幕/设备宽度赋值）并注意如果未正确处理 SSR 可能会出现的边缘情况。
@JeremyHindle 有条件地渲染组件是一件好事，但我认为人们切换到 SSR 以获得更好的 SEO，如果为了有条件地渲染您的组件根本没有渲染，这可能会影响 SEO。此外，如果您看到 withWidth HOC 将很快被弃用，那么请支持 useMediaQuery 来克服我刚才所说的条件渲染。更好的答案是根据需要明智地选择。
链接失效