服务器端 React Initial Render 导致重复的异步调用

Question

我在服务器上使用 react-router 2.0。我的一些顶级路由组件依赖于要获取的异步数据并使用 Redux 来管理状态。为了解决这个问题，我使用了一个静态fetchData()方法来返回 aPromise.all的 async 操作，如官方 Redux 文档中所建议的。它工作得很好——来自服务器的初始渲染带有 Redux 存储中的适当数据。

我的问题来自如何编写这些异步调用，这种方式既适用于服务器上的初始渲染，又适用于客户端上的后续渲染，因为加载了不同的路由。目前，我fetchData()在顶级组件的 中调用静态方法componentDidMount()，但是fetchData()一旦组件安装在客户端上，这将导致调用 。这是从另一个导航到路线时我想要的，但不是在初始渲染时，因为我们已经在服务器上进行了此调用。

我一直在努力以一种方式编写我的数据获取逻辑：

1. 仅在服务器上的初始渲染上调用一次，而不是在客户端初始渲染上调用
2. 当用户从另一条路线导航时将呈现。

我想{ serverRendered: true }在初始组件中注入一个类似的道具，但我只能<RouterContext>在调用renderToString(). 我查看了源代码，但似乎我也无法从该 JSX 标记传递该属性。

我想我的问题是：

1. 有没有办法注入一个属性，<RouterContext>以便它向下传递到“父”顶级路由组件？如果不是 in <RouterContext>，是否有另一种方法可以将属性注入？
2. 如果#1 是不可能的，是否有更好的处理方法，fetchData()以便初始渲染不会导致fetchData()在服务器和客户端上都被调用？

这是我的 server.jsx、fetchData() 处理中间件和示例顶级组件的代码示例。

Answer 1

我注入一个全局变量window.__INITAL_FROM_SERVER__ = true并从客户端清除它setTimeout。