Node/Rect:在服务器上渲染时如何处理jQueryAJAX

Node/React: How to handle jQuery AJAX when rendering on server?

本文关键字：何处理 处理 jQueryAJAX Rect 服务器 Node      更新时间：2023-09-26

我在Node/Express中有一个小的Web应用程序，它用react dom渲染初始HTML服务器端。然后在客户端使用对componentDidMount内的API的$.ajax调用来填充页面。HTML会立即加载，但在React启动并完成GET之前，没有任何有用的内容。

这是浪费。最好在渲染初始HTML时使用API。但是我不知道有什么干净的方法来实现这一点。似乎我可以通过使用存根get方法在节点中声明一个全局$来获得我想要的，但这感觉很糟糕。

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

该代码在Github上是公开的。这是一个带有$.get的组件，这是我的API。

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

最好你关注一些回购，比如：

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

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

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

  2. 在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);
    }
};

一些注意事项

  • 如果这对你来说是一个有问题的黑客，那没关系。对我来说也是一个有疑问的黑客。我仍然愿意接受建议
  • @persistent-loop建议用同时适用于服务器和客户端的模块替换jQuery的AJAX，这是解决这个问题的好方法。对于大多数人，我会推荐这种方法。我选择不这样做，因为仅仅通过网络调用代码中相邻的路由处理程序似乎很浪费。可以通过一个新奇的nginx配置来减少浪费，该配置将出站API调用重定向回同一个框，而无需往返。我正在考虑这个问题
  • 从那以后，我了解到将jQuery与React一起使用可能会导致问题。我以后会用别的东西代替它
  • 对于大多数用例来说，将AJAX保留在componentDidMount中并在没有AJAX的情况下加载初始HTML仍然是有意义的。这样，到第一个字节的时间就尽可能短。从restful API加载的东西类型通常不需要SEO，用户习惯于多等几毫秒（Facebook也会这样做）
相关文章：