Question

我开始创建一个基于Node的同构React / Redux应用程序。该项目的一个要求是基于“移动”和“桌面”视图的“适应性”呈现特定组件。我已经实现了Redux动作和reducer来存储有关用户视图的屏幕信息（基于媒体查询 - “小”，“中”，“大”）。在调整大小时，状态/商店会更新。默认状态为“小”。

const defaultState = {
    isMobile: true,
    isTablet: false,
    isDesktop: false,
    sizes: {
        small: true,
        medium: false,
        large: false,
        huge: false,
    },
};

在需要根据屏幕尺寸在两个不同版本中呈现“自适应”的组件中，我只需执行以下操作：

if（small）return variation1

if（medium）return variation2

全部工作。

现在我面临两个问题：

我的应用程序是同构的，这意味着标记也会呈现服务器端。服务器对用户的浏览器和媒体查询一无所知。因为我的默认状态是“小”，服务器将始终呈现“variation1”。节点服务器是站点的入口点。看起来渲染需要“延迟”（中间件？），服务器需要在React应用程序“交付”之前从客户端获取有关浏览器宽度的一些信息。知道如何解决这个问题吗？
因为渲染是基于状态的，所以在加载“变化1”之后总是可以看到几毫秒（闪烁），即使浏览器大小是“桌面”。这是因为在使用当前屏幕宽度更新状态之前，JS检测需要几毫秒。我认为这与上述问题和默认状态一起发挥。

我找不到1的任何解决方案，但我想必须有一些同构和响应/自适应的东西。

Answer 1

我认为很多问题需要解决很多问题，这取决于＆＃34;基于解决方案：）

我是react-sizeme和react-component-queries的作者，两个帮助处理响应组件的库，并且遇到了与您在问题中描述的类似问题。根据我的经验，我发现解决你的一个问题通常会影响另一个问题。我将通过描述下面的经验来详细说明我的意思......

我曾试图解决你的问题2＆＃34;第一：

由于默认状态导致的渲染闪烁是我在初始创建react-sizeme库时遇到的问题。 react-sizeme是一个更高阶的组件，它获取组件可用的大小，然后将其传递给组件。基于大小，您当然可以选择渲染不同的组件，就像您在示例中所做的那样，因此除非您碰巧遇到默认状态最佳位置，否则可能会发生更新闪烁。我已经征服了＃34;这可以通过更改react-sizeme来最初渲染一个空的占位符以获得可用的宽度/高度，然后只渲染你的Component，给它＆＃34;正确的＆＃34;宽度/高度。这对我来说非常有效。我不再看到ComponentBob被渲染，只是卸载并让ComponentFoo立即在其中呈现。

然后＆＃34;问题1＆＃34;来了...

react-sizeme开始受欢迎，最终我有一个图书馆的消费者希望在服务器端渲染上下文中使用它。但是由于我为问题1设置的修复，服务器端渲染会产生大量空白内容（即我正在谈论的占位符）。在将有效负载传递到浏览器之后，占位符逻辑将启动并最终将大小数据发送到组件并将其呈现。这并不理想，因为您首先要从根本上取消做SSR的任何好处。我与这个用户合作，我们认为最好的方法是允许react-sizeme配置为在＆＃34; SSR模式＆＃34;中运行。基本上这需要删除占位符呈现并允许呈现默认组件，以便您不会在初始服务器响应上获得空白页面，但随后您可以轻松地再次遇到组件闪烁问题！

Aaaaaaaaaah！在这里看见了影响！：（

所以基本上解决一个问题直接影响另一个问题。

我继续对此进行了一些思考，我相信最好的方法是尝试在第一次请求时获取用户浏览器的宽度/高度。这实际上意味着渲染一个简单的实用程序，它将这些信息丢弃，然后将其发回服务器，以便呈现用户的初始请求。然后，您可以使用宽度/高度并将其传递到整个组件树（沿途进行数学运算），以继续确定每个组件的可用高度/宽度。这里有超级棘手的东西，但可能有用。

另一个危险当然是谷歌只是为初始请求索引一个空白页（即用尽了初始宽度/高度的util的空白渲染）。你必须尝试使用一些聪明的HTTP响应代码，如重定向等，以确保谷歌跟踪到正确的渲染输出。

抱歉，这可能不是您所寻求的答案，但希望我的经验能够以某种方式提供帮助或提供某种灵感。如果您确实想出了一些有趣的实验，请让我发布。我很乐意和你一起工作。

Answer 2

您可以从服务器上的标题获取用户代理，然后使用返回数据的reducer发送带有用户代理信息的redux操作，这样您就可以检测用户是否在移动电话/平板电脑/桌面/等上进行相应的呈现< / p>

React / Redux同构/服务器端呈现和媒体查询

2 个答案: