如何实现Angular Universal仅为爬虫机器人提供SSR服务？

这问题我之前帮好几个开发者解决过，刚好踩过类似的坑！你的需求很明确——只给爬虫SSR，普通用户用纯客户端Angular，既解决闪烁又搞定路由Guards的问题，完全可行。核心思路就是根据请求的User-Agent判断访问者身份，分支处理请求，具体步骤如下：

1. 修改server.ts添加爬虫检测逻辑 #

首先在你的server.ts顶部添加一个判断是否为爬虫的辅助函数，覆盖主流搜索引擎的爬虫UA：

// 检测请求是否来自爬虫机器人
function isBot(userAgent: string): boolean {
  // 可根据需求扩展更多爬虫UA规则
  const botPatterns = [
    /googlebot/i,
    /bingbot/i,
    /slurp/i,
    /duckduckbot/i,
    /baiduspider/i,
    /yandexbot/i,
    /sogou/i,
    /exabot/i,
    /facebot/i,
    /ia_archiver/i,
    /linkedinbot/i
  ];
  return botPatterns.some(pattern => pattern.test(userAgent));
}

2. 分支处理请求：爬虫走SSR，普通用户走客户端渲染 #

找到server.ts中处理所有路由的server.get('*', ...)代码块，替换成以下逻辑：

server.get('*', (req, res) => {
  const userAgent = req.headers['user-agent'] || '';
  const indexHtml = join(distFolder, 'browser', 'index.html');

  if (isBot(userAgent)) {
    // 爬虫请求：使用Angular Universal渲染SSR内容
    res.render(indexHtml, {
      req,
      providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }]
    });
  } else {
    // 普通用户：直接返回客户端Angular的index.html，走纯客户端渲染
    res.sendFile(indexHtml, { root: distFolder });
  }
});

3. 为什么这样能解决你的问题？ #

• 消除页面闪烁：普通用户直接加载纯客户端Angular应用，跳过了SSR内容到客户端hydration的过渡过程，自然不会出现闪烁。
• 修复路由Guards问题：客户端渲染时，Angular会正常执行路由Guards的逻辑（比如用户权限校验），而SSR场景下Guards经常因为依赖客户端环境（如localStorage、浏览器API）失效，现在普通用户不走SSR，这个问题直接规避。
• 满足SEO需求：爬虫会拿到完整的SSR渲染内容，搜索引擎可以正常抓取页面信息。

4. 测试验证 #

• 模拟爬虫访问：用curl命令带上爬虫UA测试，比如：

  curl -A "Googlebot/2.1" http://your-domain.com/your-route
  

  查看返回的HTML是否包含SSR渲染的内容。
• 普通用户访问：直接在浏览器打开你的站点，检查是否是纯客户端加载（可以看网络请求，或者查看页面源码是否只有Angular的启动脚本）。

注意事项 #

• 如果你有更多小众爬虫需要支持，可以继续扩展botPatterns数组。
• 对于需要登录的路由（比如用户账户页），爬虫访问时会触发SSR的Guards逻辑，如果Guards要求登录，爬虫会跳转到登录页，这是正常的——搜索引擎本来就无法抓取需要权限的内容。

内容的提问来源于stack exchange，提问作者Adrien LAMOTTE