返回前获取数据服务器端答案

【问题标题】：Fetch data server side before returning返回前获取数据服务器端
【发布时间】：2017-08-20 11:18:04
【问题描述】：

使用 Hapi 和 React，获取数据服务器端以生成视图的最佳方法是什么？

我目前使用 Elasticsearch 作为我的数据源并使用 request 库对其进行查询，但鉴于 javascripts 的异步特性，数据永远不会按时加载，我如何才能在返回视图之前加载数据？

// search
var React = require('react');
var request = require('request');

var options = {url: 'someWebSite.com',
   headers: {
      'Accept': 'application/json;'
   },
   body: JSON.stringify({
      'data' : 'someData'
   })
};

var data;
request.get(options, function (error, response){
  data = response.body;
})

var Default = React.createClass({
  render: function() {
    return(
      //html involving data retrieved from service
    );
  }
});
module.exports = Default;

【问题讨论】：

我不知道 request 库，但我想您只需要在 request.get() 完成后在成功回调函数中创建 React Default 组件。

标签： javascript node.js reactjs request hapijs

【解决方案1】：

我会从 hapi 服务器中获取数据，然后用于填充您的视图，在您的情况下做出反应。我会在预处理程序中从外部 http 源获取数据，然后视图可以使用该数据。您不能使用 module.exports 导出异步上下文，因为“require”是同步的。

【讨论】：

【解决方案2】：

看看使用 redux-saga 来帮助你在服务器端获取初始数据。

从未使用过 Elasticsearch，但请查看我的 React example that uses Redux Saga and Hapi for Server-side Rendering

【讨论】：

【解决方案3】：

React应该以某种方式通知其依赖值的更新。

React 组件依赖于 props 和 state 以及范围之外的东西。

组件中的props只有在父组件传递新的props对象时才能更改
state 可以更新为 .setState
globals（除 props 和 state 之外的所有内容）可以更新 React 元素：
- 将其复制到state 并使用全局变量中的一些订阅方法对其进行更新。
- 直接使用其值，并再次通过订阅全局更新在组件上调用.forceUpdate
- 使用新的props 重新渲染根组件

在您的情况下，我建议您使用以下方法之一：

使用Kefir.js（或类似的）和bind Observable更新到props
将此类查询放在根component
使用 Redux 或 ReFlux 并查找有关如何使用这些库完成数据同步的教程

【讨论】：