Angular Prerender(SSG)问题：如何让静态页仅构建时调用API？

以下是几种可行的实现方式，可根据你的场景选择适配的方法：

1. 完全禁用Hydration（纯静态方案） #

Angular的Hydration机制会在页面加载后启动框架、恢复组件状态，这也是后续触发API请求的核心原因。直接禁用Hydration后，页面将变成纯静态HTML，不会运行任何Angular运行时逻辑，自然不会再发起API请求。

操作步骤：
在main.ts或app.config.ts中移除provideClientHydration()配置：

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    // 移除该行：provideClientHydration()
  ]
});

注意：这种方式下Angular完全不启动，内部路由跳转会变成全页面刷新，适合无需交互的纯静态展示页面。

2. 用TransferState缓存构建阶段的API数据 #

在预渲染时把API获取的数据存入TransferState，客户端加载页面后直接读取缓存数据，不再发起新请求。

实现示例：

import { Component, OnInit } from '@angular/core';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { HttpClient } from '@angular/common/http';

// 定义唯一的状态键
const POST_DATA_KEY = makeStateKey<any>('postData');

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html'
})
export class PostComponent implements OnInit {
  postData: any;

  constructor(private transferState: TransferState, private http: HttpClient) {}

  ngOnInit(): void {
    // 优先读取预渲染时存入的缓存数据
    this.postData = this.transferState.get(POST_DATA_KEY, null);
    
    // 仅在非预渲染场景（如动态路由跳转）才发起请求，可按需调整
    if (!this.postData) {
      this.http.get('/api/posts/1').subscribe(data => {
        this.postData = data;
      });
    }
  }
}

补充：如果用Angular Universal做预渲染，可在服务器端逻辑中先请求API，再把数据存入TransferState，确保客户端直接读取缓存。

3. 通过环境变量区分执行环境 #

利用Angular的环境变量，让API请求仅在预渲染/构建阶段执行，客户端加载后不再触发。

操作步骤：

1. 在environment.ts中添加isBrowser: true，environment.server.ts中添加isBrowser: false
2. 组件中判断环境，仅在非浏览器环境（预渲染时）发起API请求：

import { environment } from '../environments/environment';

ngOnInit(): void {
  // 仅在预渲染/服务器端执行API请求
  if (!environment.isBrowser) {
    this.http.get('/api/posts/1').subscribe(data => {
      this.postData = data;
    });
  }
  // 客户端直接使用预渲染生成的静态DOM数据，或通过TransferState读取
}

4. 预渲染时动态注入路由静态数据 #

在构建前通过脚本获取所有API数据，动态生成带静态数据的路由配置，组件直接读取路由数据，无需发起API请求。

实现示例：

1. 构建前用Node脚本从API获取所有文章数据，生成routes.ts：

// 生成后的app.routes.ts
import { Routes } from '@angular/router';
import { PostComponent } from './post/post.component';

export const routes: Routes = [
  {
    path: 'post-1',
    component: PostComponent,
    data: { postData: { id: 1, title: 'Post 1', content: '静态内容...' } }
  },
  {
    path: 'post-2',
    component: PostComponent,
    data: { postData: { id: 2, title: 'Post 2', content: '静态内容...' } }
  }
];

2. 组件中直接读取路由数据：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  this.postData = this.route.snapshot.data['postData'];
}

内容的提问来源于stack exchange，提问作者Илья