服务器端的条件渲染

Question

背景
我使用 next.js 进行服务器端渲染，react.js 进行客户端渲染。

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

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

想法
想过一些办法，不知道行不行-
1. 使用 http 请求将设备信息或 window 对象作为 json 发送。
2. 不要在服务器端渲染条件组件并在客户端重新渲染（混合）它们。

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

Answer 1

您可以通过在 server.js

中使用这段代码来知道该设备是否是移动设备

app.get('*', (req, res) => {
  var ua = req.header('user-agent');
  if (/mobile/i.test(ua)) {
    //mobile code
  } else {
    // desktop code
  }
});

你可以在反应中传递这个布尔值并使用它

Answer 2

我有几个地方有这些条件。最后，我决定只在客户端渲染条件组件，作为问题最少、开销最小的解决方案。

其他解决方案：

如果它是一个具有重要 SEO 内容的组件，并且您需要渲染它（如果它以错误的尺寸渲染，让它看起来更好一点，直到根据屏幕尺寸反应重新渲染组件）。请记住，这种方法可能会在再水化过程中引入一些错误，因为反应有时会重复 div。您可以为某个组件设置一个新密钥来修复它。

您也可以使用 css 来隐藏内容。

Answer 3

考虑使用下一种方法：

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

至少要注意接下来你应该注意的情况：

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

服务器端的条件渲染

Conditional Rendering on Server Side

http-headers

reactjs

server-side-rendering

next.js