Javascript Node/React：在服务器上渲染时如何处理jQuery AJAX？

我在Node/Express中有一个小webapp，它用react-dom呈现初始HTML服务器端。然后在客户端使用对

componentDidMount

内部API的

$.ajax

调用填充页面。HTML会立即加载，但在React启动并完成该GET之前，没有有用的内容

这是浪费。最好在呈现初始HTML时点击API。但是我不知道一个干净的方法来实现这一点。似乎我可以通过使用stubbed

get

方法在节点中声明一个全局

$

来得到我想要的，但这感觉很脏

在呈现React组件服务器端时，如何实现

$.ajax

代码在Github上是公共的。使用

$。获取
和。

componentDidMount不在服务器上运行，它只在第一次渲染时运行客户端，因此ajax请求永远不会在服务器上发生。您应该使用静态方法（还有其他方法）
如果您选择superagent或axios，这会更好，因为它们可以在客户端和服务器端发出ajax请求
然后必须将ajax请求的结果作为全局变量的初始状态

如果你遵循一些回购协议会更好，比如：

请看
我是如何解决这个问题的

将我的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);
    }
};


一些注意事项


如果你觉得这是一个可疑的黑客行为，那没关系。对我来说，这也是一个值得怀疑的问题。我仍然愿意接受建议
@stamina loop建议用同时适用于服务器和客户端的模块替换jQuery的AJAX，这是一个很好的解决方案。对于大多数人，我会推荐这种方法。我选择不这样做，因为仅仅通过网络调用代码中相邻的路由处理程序似乎是浪费。通过一个奇特的nginx配置可以减少浪费，它可以将出站API调用重定向回同一个框，而无需往返。我正在考虑这个问题
后来我了解到，在React旁边使用jQuery可能会导致问题。以后我会用别的东西来代替它
对于大多数用例来说，将AJAX保留在componentDidMount中并在没有它的情况下加载初始HTML仍然是有意义的。这样，到第一个字节的时间尽可能低。SEO通常不需要从restful API加载的内容类型，用户习惯于多等几毫秒（Facebook这样做，你也可以）
打印时能否将获取的值作为默认状态注入？@dandavis我会尝试一下。如果你知道有人以同构的方式做这件事的例子，我很想看看。这是一个关于同构JS在不必要的情况下会走得太远的观点。Facebook确实进行了初始加载，然后以足够快的速度提供服务，以免损害用户体验。