Angular 17 SSR部署问题：动态路由未服务端渲染致Google索引异常

以下是针对你遇到的动态路由仅客户端渲染、服务端未执行API请求问题的排查方向：

1. 检查Nginx配置是否正确转发动态路由请求 #

这是最常见的原因——如果Nginx没有将动态路由请求转发给Node.js的SSR服务，而是直接返回了静态的index.html，服务端根本不会处理该请求。

正确的Nginx配置示例： #

server {
    listen 80;
    server_name your-domain.com;

    # 指向Angular构建后的browser目录
    root /path/to/your/dist/browser;
    index index.html;

    # 静态资源直接返回，设置长期缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 所有非静态资源的请求，转发到Node SSR服务
    location / {
        proxy_pass http://localhost:4000; # 替换为你的Node服务监听端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # 禁止缓存动态路由请求
        add_header Cache-Control "no-cache, no-store, must-revalidate";
    }
}

• 确保location /块覆盖了所有动态路由（比如/game/:id/:slug），没有被其他更具体的location规则拦截。
• 重启Nginx后，直接访问Node服务的端口（比如http://localhost:4000/game/1/slug）测试，如果此时能看到服务端渲染的HTML（查看页面源码有动态内容），说明Nginx配置是问题所在。

2. 验证Node SSR服务的启动状态与路径 #

• 确认pm2启动的server.mjs是来自Angular SSR构建后的dist/server目录，而不是其他路径。
• 检查Node服务的监听端口是否与Nginx配置的proxy_pass端口一致（默认server.ts监听4000）。可以通过pm2 logs查看服务日志，确认是否有请求到达服务端。
• 确保构建命令正确：使用ng build --ssr生成完整的SSR产物（dist下包含browser和server两个目录）。

3. 检查Angular路由与组件数据获取逻辑 #

• 确认动态路由在app-routing.module.ts中正确定义，且没有在动态路由前设置通配符路由（比如{ path: '**', ... }），否则服务端路由匹配会异常。
• 组件中的数据获取逻辑需要兼容SSR：如果使用HttpClient获取数据，确保在服务端渲染时能正常执行（避免依赖浏览器API，比如window）。如果用了TransferState，要确保正确配置以传递服务端获取的数据到客户端。

4. 检查默认server.ts的路由处理逻辑 #

默认的server.ts中应该有如下代码块处理所有非静态请求：

// All regular routes use the Angular engine
server.get('*', (req, res, next) => {
  const { protocol, originalUrl, baseUrl, headers } = req;

  commonEngine
    .render({
      bootstrap,
      documentFilePath: indexHtml,
      url: `${protocol}://${headers.host}${originalUrl}`,
      publicPath: browserDistFolder,
      providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
    })
    .then((html) => res.send(html))
    .catch((err) => next(err));
});

确保这段代码没有被修改或注释，它负责将所有动态路由请求交给Angular SSR引擎处理。

5. 排除缓存干扰 #

• 检查Nginx是否开启了页面缓存，确保动态路由请求不会被缓存返回index.html。
• 测试时使用浏览器的隐私模式，避免客户端缓存的影响。

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