Angular Universal 何时将渲染完成的组件内容发送到客户端？

Angular Universal 默认行为 #

Angular Universal 的默认表现是服务端等待接口请求完成、拼接好包含完整数据的HTML模板后再发送给客户端。
服务端渲染流程中，Angular 会等待应用进入稳定状态（所有宏任务、微任务全部执行完成）才会生成最终的静态HTML返回给浏览器。你示例中ngOnInit内触发的HTTP请求属于会阻塞稳定状态判定的异步任务，且HTTP类型的可观察对象在请求响应后会自动完成，所以服务端会等待请求结束、this.tasks赋值完成，将渲染好的任务列表内容写入HTML后再返回给客户端。
这种默认行为返回的页面已经包含完整可展示的内容，有利于SEO优化，也能降低用户首屏内容的等待时长。

修改默认行为的方案 #

如果你需要实现「服务端先返回页面壳，请求在客户端执行后再渲染业务内容」的逻辑，可以选择以下常用方案：

1. 平台判断限制请求执行环境 #

通过isPlatformBrowserAPI限制异步请求仅在客户端环境触发，服务端渲染阶段不会执行该请求，自然也不会等待：

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

// 组件内部代码
constructor(
  private tasksService: TasksService,
  @Inject(PLATFORM_ID) private platformId: Object
) {}

ngOnInit() {
  // 仅在客户端环境执行请求逻辑
  if (isPlatformBrowser(this.platformId)) {
    this.tasksService.getAll().subscribe(tasks => this.tasks = tasks);
  }
}

2. 配置服务端渲染超时阈值 #

如果是部分请求响应过慢，不想让服务端长时间阻塞等待，可以配置服务端渲染的超时时间，超时后直接返回当前已渲染的页面结构，后续的渲染逻辑完全交给客户端处理。

3. 标记组件跳过水合（Angular 16+ 适用） #

如果你使用Angular 16及以上版本的水合（Hydration）功能，可以给目标组件添加ngSkipHydration属性，服务端不会等待该组件的异步逻辑执行完成，直接返回基础页面结构，组件的完整渲染逻辑会交给客户端独立完成。

内容的提问来源于stack exchange，提问作者Артем Поликарпов