【发布时间】：2016-10-07 08:05:58
【问题描述】：
我开始创建一个基于 Node.js 的同构 React/Redux 应用程序。该项目的一项要求是基于“移动”和“桌面”视图对特定组件进行“自适应”渲染。我已经实现了 Redux action 和 reducer 来在状态中存储有关用户视图的屏幕信息（基于媒体查询 - “small”、“medium”、“large”）。调整大小时，状态/商店会更新。默认状态是“小”。
const defaultState = {
isMobile: true,
isTablet: false,
isDesktop: false,
sizes: {
small: true,
medium: false,
large: false,
huge: false,
},
};
在需要根据屏幕大小在两个不同版本中“自适应”渲染的组件中，我只是做了一个：
如果（小）返回变化1
如果（中等）返回变化2
一切正常。
现在我面临两个问题：
-
我的应用程序是同构的，这意味着标记也呈现在服务器端。服务器对用户的浏览器和媒体查询一无所知。所以因为我的默认状态是“small”，所以服务器总是会渲染“variation1”。节点服务器是站点的入口点。看起来渲染需要“延迟”（中间件？），并且服务器需要在 React 应用程序“交付”之前从客户端获取一些关于浏览器宽度的信息。知道如何解决这个问题吗？
-
因为渲染是基于状态的，所以即使浏览器大小为“桌面”，加载后“变体 1”总是可以首先看到几毫秒（闪烁）。这是因为 JS 检测需要几毫秒才能将状态更新为当前屏幕宽度。我认为这与上述问题和默认状态一起发挥作用。
我找不到 1 的任何解决方案，但我想肯定有一些同构和响应/自适应的东西。
【问题讨论】：
-
我很好奇“variation1”是什么。尚不确定它是否与您的问题相关，但变化只是视图的替代呈现，还是还有其他事情发生？
-
“变体 1”和“变体 2”共享相同的数据，但视图看起来不同，行为也不同。就像 1 是一种手风琴式的东西，而 2 只是一个静态布局。与我认为的问题无关。上面描述的问题更普遍。
标签： node.js reactjs serverside-javascript isomorphic-javascript server-side-rendering