javascript - 如何判断请求是否应该呈现在服务器端？ (ReactJS)

Question

我正在编写一个使用 ReactJS 来渲染页面的应用程序。 ReactJS 组件具有前端代码，但为了 SEO 而将它们呈现在服务器端非常重要。如何判断请求是否来自网络爬虫以呈现服务器端？

Answer 1

要直接回答问题，您可以测试请求的用户代理字符串:

var crawlerUserAgents = [
  'googlebot',
  'yahoo',
  'bingbot',
  'baiduspider',
  'facebookexternalhit',
  'twitterbot',
  'rogerbot',
  'linkedinbot',
  'embedly',
  'quora link preview',
  'showyoubot',
  'outbrain',
  'pinterest',
  'developers.google.com/+/web/snippet',
  'slackbot',
  'vkShare',
  'W3C_Validator',
  'redditbot',
  'Applebot'
];

var userAgent = req.headers['user-agent'];

function isBot() {
  return crawlerUserAgents.some(function(crawlerUserAgent) {
    return userAgent.toLowerCase().indexOf(crawlerUserAgent.toLowerCase()) !== -1;
  });
}

app.use(function(req, res, next) {
  var userAgent = req.headers['user-agent'];

  if (isBot(userAgent)) {
    // It's a user agent
  }

  next();

});

(改编自 prerender 并使用 Express 中间件)

但是，替代解决方案是使您的应用程序呈现通用/同构 - 因为初始请求在服务器和客户端上呈现相同的效果。有许多同构教程和存储库。这意味着用户也可以在不加载微调器的情况下获得第一批 html。值得注意的是，它也可能是更难设置和适应的解决方案。

如果您的应用程序普遍工作，那么您不需要检测请求是否是机器人，或者是否来自服务器，只要您的路由器和获取是同构的，并且您没有在客户端特定的代码服务器将执行。

使用能够为您处理复杂性的解决方案可能是个好主意，例如https://nextjs.org/ , https://remix.run/ , https://blitzjs.com/