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

本文关键字：服务器端 ReactJS 是否 何判断 判断 请求 | 更新日期: 2023-09-27 18:21:09

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

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

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

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();
});

（改编自预提交并使用Express中间件）

然而，另一种解决方案是让你的应用程序通用/同构地呈现——因为初始请求在服务器和客户端上呈现相同的内容。有许多同构的教程和存储库。这意味着用户还可以在不加载微调器的情况下获得第一批html。值得注意的是，这可能也是一个更难设置和适应的解决方案。

如果你的应用程序是通用的，那么你不需要检测请求是机器人，还是来自服务器，只要你的路由器和获取是同构的，并且你在服务器执行的地方没有特定于客户端的代码。

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

相关文章：