reactjs - 服务器端的条件渲染

Question

背景
我将 next.js 用于服务器端渲染，将 react.js 用于客户端。

目标
想在服务器端根据窗口大小进行条件渲染。比如 200px 宽度渲染 A 组件和 400px 宽度渲染 B 组件。

问题
在服务器端，我们无权访问窗口对象，我们也不知道客户端正在使用的设备。所以 AFAIK 我们不能在服务器端进行条件渲染。

想法
我想到了一些解决方案，但不知道是否可行-
1. 将设备信息或窗口对象作为 json 与 http 请求一起发送。
2. 不要在服务器端渲染条件组件并在客户端重新渲染(混合)它们。

但我不知道什么是最佳实践，什么比其他更有效。也欢迎提出新建议。

Answer 1

考虑使用下一种方法:

1. 在服务器端，您可以通过解析用户代理来预测设备类型在mobile-detect的帮助下打包并将期望值传递给在 react-sizes 之上创建的同构 HOC这允许设置“预测的”屏幕尺寸以在服务器端工作。
2. 用适合您业务逻辑的方式包装您的条件逻辑您创建的具有自适应 HOC 的结构
3. ...
4. 利润

至少要注意您应该注意的下一个案例:

1. 桌面用户代理的窄屏将呈现为桌面，但可能会开始在客户端重新呈现，如 MatchMedia将在客户身上完成工作
2. 任何缓存层都应该将解析的设备类型包含到缓存键中这样您就不会缓存可能损坏的布局。