服务器端的条件渲染

Question

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

目标 想要在服务器端的窗口大小的基础上进行条件渲染。像200px宽度渲染A组件和400px宽度渲染B组件。

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

思考 我想到了一些解决方案，但不知道是否有可能 - 1.使用http请求将设备信息或窗口对象作为json发送。 2.不要在服务器端渲染条件组件，并在客户端重新渲染（水合）它们。

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

Answer 1

考虑使用下一种方法：

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

请注意至少您应该注意的下一个案例：

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

Answer 2

您可以通过在server.js中使用这段代码来了解设备是否是移动设备

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

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

Answer 3

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

其他方案：

如果它是一个具有重要搜索引擎优化内容的组件，你需要渲染它（如果它呈现在错误的大小上使它看起来好一点，直到根据屏幕大小反应重新渲染组件）。请记住，这种方法可能会在再水化过程中引入一些错误，因为反应有时会复制div。您可以为compont设置一个新密钥来修复它。

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