小编Kra*_*rad的帖子

我开始创建一个基于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的任何解决方案,但我想必须有一些同构和响应/自适应的东西.