Server Side React Initial Render导致重复的异步调用

Question

我在服务器上使用react-router 2.0。我的一些顶级路由组件依赖于要获取的异步数据，并使用Redux来管理状态。为了解决这个问题，我使用静态fetchData()方法返回Promise.all中建议的异步动作的the official Redux docs。它工作得很好 - 服务器的初始渲染带有Redux存储中的相应数据。

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

我一直在努力编写我的数据获取逻辑，其方式如下：

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

我正在考虑将{ serverRendered: true }这样的道具注入初始组件，但在调用<RouterContext>时我只能访问renderToString()。我看了一眼源代码，但似乎我不能从JSX标签传递属性。

我猜我的问题是：

1. 有没有办法在<RouterContext>中注入一个属性，以便它传递给'父'顶层路由组件？如果不是在<RouterContext>，是否有其他方式注入该物业？
2. 如果＃1不可能，有没有更好的方法来处理fetchData()所以初始渲染不会导致在服务器和客户端上调用fetchData()？

Here’s a code sample of my server.jsx, the fetchData() handling middleware and an example top-level compnent.

Answer 1

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