服务器端的条件渲染

Question

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

目标
希望基于服务器端的窗口大小进行条件渲染。就像200px宽度的渲染A组件和400px宽度的渲染B组件一样。

问题
在服务器端，我们无法访问window对象，也无法了解客户端使用的设备。因此AFAIK我们无法在服务器端进行条件渲染。

想法
我已经考虑过一些解决方案，但是不知道有没有可能-
1.使用http请求将设备信息或窗口对象作为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
  }
});

您可以在react中传递此布尔值并使用它

Answer 2

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

其他解决方案：

如果它是具有重要SEO内容的组件，则需要对其进行渲染（如果将其渲染为错误的大小，直到根据屏幕大小对组件进行重新渲染，使它看起来更好一点）。切记，这种方法会在补液过程中引入一些错误，因为有时会重复div。您可以为组件设置新的密钥来修复它。

您还可以使用CSS隐藏内容。

Answer 3

考虑使用下一种方法：

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

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

1. 桌面用户代理的窄屏将按原样呈现 桌面，但可能会像MatchMedia一样开始在客户端重新渲染 会为客户做事
2. 任何缓存层都应将已解析的设备类型包括在缓存键中 因此您将不会缓存可能损坏的布局。