使用异步数据提取的服务器端呈现

Question

我们正在使用react / react-router / redux构建我们的网站

我们希望服务器端渲染我们的页面，这些页面应该由我们的数据源中的数据填充。 这个事务必须是异步的，不幸的是因为我们想要服务器端渲染，我们不能使用“componentDidMount”函数。

在这里的服务器端渲染部分的redux教程页面中，建议：

如果使用React Router之类的东西，您可能还希望将数据提取依赖关系表示为路由处理程序组件上的静态fetchData（）方法。 它们可能会返回异步操作，因此handleRender函数可以匹配到路由处理程序组件类的路由，为每个类调度fetchData（）结果，并且只在Promises解析后才进行渲染。 这样，不同路由所需的特定API调用与路由处理程序组件定义共同定位。 您还可以在客户端使用相同的技术，以防止路由器切换页面，直到其数据已加载。

这是我们目前处理数据获取的方式。 我个人不喜欢这种方法，它看起来很笨拙，而且它太过耦合到路由库。 有没有更好的方法 - 希望使用标准的react / router / redux组件？

Answer 1

类似于静态fetchData()方法的东西是在一般情况下使用React Router处理数据获取的正确方法，尽管它可以根据需要到达子组件（例如Relay如何工作）。

您希望这样做的原因是React Router一次性解析所有匹配的路由。 鉴于此，您可以同时为所有路由处理程序运行数据获取。

相反，如果您将数据提取绑定到组件上的实例级处理程序，那么您最终会得到提取瀑布，其中组件无法获取其所需数据，直到其所有父级都接收到所需数据，依此类推。 虽然这可能不是服务器上的大问题，但它在客户端上非常不理想。

如果您确实希望将数据依赖项与组件共存，则可以考虑使用React Resolver之类的东西，但这很容易导致用户的次优体验。