Node/React：在服务器上呈现时如何处理jQuery AJAX？

我在Node/Express中有一个小web应用程序，用于响应dom呈现最初的HTML服务器端。然后页面被填充到客户端，调用componentDidMount内的API调用$.ajax。 HTML会立即加载，但在React启动并完成该GET之前没有有用的内容。Node/React：在服务器上呈现时如何处理jQuery AJAX？

这是浪费。在呈现最初的HTML的同时击中API会更好。但。我不知道一个干净的方式来实现这一点。似乎我可以得到我想要的，通过在节点中声明全局$与get方法，但这感觉很脏。

如何在呈现React组件服务器端时实现$.ajax？

该代码在Github上公开。 Here's a component与$.get和here's my API。

来源

2015-12-30 jtschoonhoven

您可以在打印时将获取的值注入默认状态吗？ – dandavis

@dandavis我会试一试。如果你知道某个人以同构的方式做这件事的例子，我很乐意看到它。 – jtschoonhoven

componentDidMount不在服务器上运行，它只为第一个渲染器运行客户端，所以ajax请求将永远不会在服务器上发生。你应该用静态方法来做（有其他方法）
如果你选择superagent或axios - 会使ajax请求客户端和服务器端
然后你必须把结果ajax请求作为全局变量的初始状态。

这是更好，如果你遵循一些回购，这样的：

见https://github.com/erikras/react-redux-universal-hot-example

来源

2015-12-31 00:15:00 staminaloops

以下是我解决了这个。

动了我的AJAX出componentDidMount，以便在渲染服务器上的初始HTML它被称为。

在节点中声明了我自己的全局$，它使用直接调用路由器的get方法。这是什么样子：

global.$ = { 
    get: (url, cb) => { 
     const req = {url: url}; 
     const res = { 
      send: data => cb(data), 
      status:() => { 
       return {send: data => cb(data)}; 
      } 
     }; 
     return api_router(req, res); 
    } 
};

一些注意事项

如果这种感觉就像一个可疑的黑客给你，这是确定。这感觉对我来说也是一个可疑的黑客。我仍然乐于接受建议。
@耐力循环的建议，取代jQuery的AJAX模块，同时适用于服务器和客户端是一个很好的解决这个问题。对于大多数人，我会推荐这种方法。我选择不这样做，因为通过网络去调用一个代码中相邻的路由处理程序似乎很浪费。可以通过一个花哨的nginx配置来减少浪费，该配置可以在不进行往返的情况下将出站API调用重定向回同一个框。我正在考虑这一点。
我已经了解到，使用jQuery和React一起可能会导致问题。我会用其他东西替代它。
对于大多数使用情况，将AJAX保留在componentDidMount中并在没有它的情况下加载初始HTML仍然有意义。这样，第一个字节的时间越少越好。从安静的API加载的东西的类型通常不需要搜索引擎优化，并且是用户习惯于等待几毫秒的事情（Facebook也是如此）。

来源

2015-12-31 17:16:33 jtschoonhoven

这是关于何时同构JS在没有必要时可能被采用得太远的一个很好的观点。 Facebook的确确实施了初始加载，然后以足够快的速度提供服务，以免损害用户体验。 – marcacyr

Node/React：在服务器上呈现时如何处理jQuery AJAX？

回答

相关问题