机器人是否在 React ComponentDidMount 中运行代码？答案

【问题标题】：Do bots run code in React's ComponentDidMount?机器人是否在 React ComponentDidMount 中运行代码？
【发布时间】：2017-01-12 13:33:22
【问题描述】：

我想知道机器人（例如 Google 搜索引擎爬虫）是否运行客户端 JavaScript 并因此可以触发 ComponentDidMount。

我的应用有许多个人资料，并通过在个人资料组件的ComponentDidMount 中发出 POST 请求来记录个人资料查看次数

例如

class Profile extends React.Component {
    componentDidMount() {
      const { params: { id } } = this.props;
        client.post(`/profile/${id}/views`)
         .catch(err => console.log('Error while incrementing view', err));
    }
    ....
}

但我注意到，我记录的浏览量比 Google Analytics（分析）中的页面浏览量高出约 30%。

我的应用是服务器端渲染的，在<head /> 中没有<meta name="fragment" content="!>。

这种差异可能是由运行客户端 JavaScript 并因此运行 ComponentDidMount 代码的机器人造成的吗？如果是这样，衡量个人资料浏览量的可靠方法是什么？

编辑

我做了一个实验来检测机器人并检查它们是否正在向上面给出的 URL 发出 POST 请求。如果是这样，这意味着他们正在运行ComponentDidMount。

我将以下中间件放在我的 Express 服务器中：

app.use((req, res, next) => {
  const ua = req.headers['user-agent'];
  if (isBot(ua)) {
    console.log('BOT DETECTED', req.url, ua);
  } else {
    console.log('not a bot', req.url, ua);
  }
  next();
});

当机器人点击个人资料页面时，日志显示：

BOT DETECTED /profile/1111 Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)

当我作为用户点击个人资料页面时，日志显示：

not a bot /profile/1111 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
not a bot /profile/1111/views/views Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

所以谷歌爬虫似乎没有运行我的componentDidMount 代码。

但是造成这种差异的原因是什么？会不会是 Google Analytics 页面浏览量根本不准确？

【问题讨论】：

搜索机器人不运行 javascript - 虽然，我自己研究这个主题已经很多年了，自 00 年代以来情况可能已经发生了变化：D
谷歌机器人现在可以运行 JS，我对此有见解，将在 15-20 分钟内回答，远离笔记本电脑
@HarkiratSaluja 你愿意分享你对这个问题的见解吗？

标签： javascript reactjs google-analytics google-search

【解决方案1】：

Google 抓取工具现在可以读取 javascript，因此您的前端框架和库工作得非常好。但是，事情并没有那么简单。

Google 机器人会解析您的动态内容，但如果您从 javascript 机器人调用任何 API（获取/发布），通常不会等待它们，因此如果您的大部分内容来自 API 调用，机器人不会读取文本。

现在来到谷歌分析，是的 componentDidMount() 被谷歌爬虫读取。我建议在 API 调用开始之前在您的componentDidMount() 中首先触发一个事件。

【讨论】：

谷歌爬虫好像没有运行componentDidMount()。您能否查看我的编辑并告诉我您对问题原因的看法？
你能在你的componentDidMount() 里放一个正常的打印声明吗？机器人不能很好地处理 ajax 调用
我认为我无法通过将 console.log 放入 componentDidMount() 进行调试，因为当机器人运行该 console.log 时，我无法知道是否发生了这种情况。
我刚刚在后端添加了一个保护子句，如果user-agent 看起来是一个机器人，它会阻止增加视图。