Angular Universal部署Vercel后首页未实现SSR渲染求助

1. 检查Vercel部署配置文件 #

Vercel部署Angular SSR依赖vercel.json的正确配置，若根目录无该文件，创建并填入以下内容（替换项目名为你的实际项目名sito-igna）：

{
  "buildCommand": "npm run build:ssr",
  "devCommand": "npm run serve:ssr",
  "installCommand": "npm install",
  "functions": {
    "dist/sito-igna/server/main.js": {
      "runtime": "@vercel/node@2.x"
    }
  },
  "routes": [
    {
      "src": "/(.*)",
      "dest": "dist/sito-igna/server/main.js"
    }
  ]
}

若已有vercel.json，确认上述配置项是否完整，尤其是路由规则和SSR入口文件路径。

2. 排查首页组件的客户端特有代码 #

HomeComponent若直接访问window、document等仅存在于浏览器环境的对象，会导致服务端渲染失败，Vercel会 fallback 到客户端渲染。需用isPlatformBrowser包裹这类代码：

import { Component, OnInit, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      // 仅在客户端执行的代码，如操作window、document
    }
  }
}

3. 禁用Vercel首页静态缓存 #

Vercel可能对首页做静态缓存，跳过SSR流程。在vercel.json的路由规则中添加缓存控制：

"routes": [
  {
    "src": "/",
    "dest": "dist/sito-igna/server/main.js",
    "headers": {
      "Cache-Control": "no-cache, no-store, must-revalidate"
    }
  },
  {
    "src": "/(.*)",
    "dest": "dist/sito-igna/server/main.js"
  }
]

4. 验证SSR构建输出 #

本地执行npm run build:ssr，检查dist/sito-igna/server/main.js是否生成，且构建日志无错误。部署Vercel时查看构建日志，确认首页相关代码无服务端执行报错。

5. 检查路由配置 #

确认app-routing.module.ts中首页路由{ path: '', component: HomeComponent }无特殊限制，比如未添加含客户端逻辑的路由守卫，或守卫未兼容服务端环境。

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