Question

我在Node / Express中有一个小型webapp，它使用react-dom呈现初始HTML服务器端。然后在客户端填充页面，$.ajax调用componentDidMount内的API。 HTML立即加载，但在React启动并完成GET之后，没有任何有用的内容。

这很浪费。最好在渲染初始HTML时点击API。但。我不知道实现这个的干净方法。看起来我可以通过使用存根$方法在节点中声明全局get来获得我想要的东西，但这感觉很脏。

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

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

Answer 1

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

如果你按照一些回购方式做得更好，就像这样：

请参阅https://github.com/erikras/react-redux-universal-hot-example

Answer 2

以下是我解决这个问题的方法。

将我的ajax移出componentDidMount，以便在服务器上呈现初始HTML时调用。

在Node中声明了我自己的全局$，并使用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调用重定向回同一个盒子而不进行往返。我在想这个。
我已经了解到使用jQuery和React可能会导致问题。我将用其他东西替换它。
对于大多数用例，将AJAX保留在componentDidMount中并在没有它的情况下加载初始HTML仍然是有意义的。这样，时间到第一个字节的速度尽可能低。 SEO中通常不需要从restful API加载的东西类型，并且用户习惯等待几毫秒（Facebook也是如此）。

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

2 个答案: