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

Question

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

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

在需要根据屏幕大小在两个不同版本中呈现"自适应"的组件中,我只需执行以下操作:

如果(小)返回变化1

如果(中)返回变异2

一切正常.

现在我面临两个问题:

1. 我的应用程序是同构的,这意味着标记也呈现服务器端.服务器对用户的浏览器和媒体查询一无所知.因为我的默认状态是"小",服务器将始终呈现"variation1".节点服务器是站点的入口点.看起来渲染需要"延迟"(中间件？),服务器需要在React应用程序"交付"之前从客户端获取有关浏览器宽度的一些信息.知道如何解决这个问题吗？

2. 因为渲染是基于状态的,所以在加载"变化1"之后总是可以看到几毫秒(闪烁),即使浏览器大小是"桌面".这是因为在使用当前屏幕宽度更新状态之前,JS检测需要几毫秒.我认为这与上述问题和默认状态一起发挥作用.

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

Answer 1

在我看来,一个非常难以解决的问题是基于很多"依赖于"的解决方案.:)

我的作者react-sizeme和react-component-queries,两个图书馆与响应组件帮助,并为您在您的问题描述都遇到类似的问题.根据我的经验,我发现解决你的一个问题通常会影响另一个问题.我将通过描述下面的经验详细说明我的意思......

我曾尝试先解决你的"问题2":

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

然后"问题1"出现了......

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

Aaaaaaaaaah!在这里看见了影响!:(

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

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

另一个危险当然是google只是为初始请求索引一个空白页面(即用于捕获初始宽度/高度的util的空白渲染).你必须尝试使用​​一些聪明的HTTP响应代码,如重定向等,以确保谷歌跟踪到正确的渲染输出.

对不起,这可能不是您正在寻找的答案,但希望我的经验有所帮助或提供某种灵感.如果您确实想出了一些有趣的实验,请让我发布.我很乐意和你一起工作.

Answer 2

您可以从服务器上的标头获取用户代理，然后使用返回数据的reducer调度带有用户代理信息的redux操作，这样您就可以检测用户是否在手机/平板电脑/台式机/等设备上并相应地渲染