Angular 19 SSG如何添加自定义服务端渲染逻辑？

完全可以在Angular 19的SSG流程中添加自定义服务端逻辑来处理Stencil组件的水合，核心是修改Angular SSR/SSG的入口文件server.main.ts，将Stencil的水合逻辑嵌入到Angular的页面渲染流程中。以下是具体实现步骤：

1. 修改server.main.ts集成Stencil水合逻辑 #

Angular 19的SSG/SSR默认使用server.main.ts作为服务端渲染的入口，它导出的render函数负责处理每个请求的页面渲染。我们可以在Angular渲染页面之前，先对HTML文档执行Stencil的服务端水合：

import { renderApplication } from '@angular/platform-server';
import { AppServerModule } from './app/app.server.module';
// 导入Stencil的服务端水合API
import { hydrateDocument } from '@stencil/core/hydrate';

export default async function render(url: string, document: string) {
  // 第一步：对原始HTML文档进行Stencil组件的服务端水合
  const hydratedDocument = await hydrateDocument(document, {
    // 指定需要水合的Stencil组件（从你的设计系统库中导入）
    components: [/* 例如：MyButton, MyCard, MyHeader */]
  });

  // 第二步：将水合后的文档传入Angular进行渲染
  const renderedHtml = await renderApplication(AppServerModule, {
    document: hydratedDocument,
    url
  });

  return renderedHtml;
}

2. 确保Stencil组件库支持服务端水合 #

检查你的Stencil设计系统项目的stencil.config.ts，确保已启用服务端水合配置：

import { Config } from '@stencil/core';

export const config: Config = {
  // 其他配置...
  hydrateOptions: {
    enabled: true
  }
};

3. 验证NX/Angular的SSG配置 #

确认你的NX项目配置（project.json）中，SSG的服务端入口指向修改后的server.main.ts，默认配置通常已经正确指向，但可以检查以下节点：

{
  "targets": {
    "build": {
      "options": {
        "server": "apps/your-app/src/server.main.ts",
        "ssg": true
      }
    }
  }
}

4. 测试SSG生成结果 #

运行SSG构建命令：

nx build your-app --ssg

构建完成后，查看dist/apps/your-app/browser目录下的静态HTML文件，检查Stencil组件是否已被服务端水合（组件的DOM内容应该直接渲染在HTML中，而非仅保留自定义标签）。

注意事项 #

• 避免在Stencil组件的服务端逻辑中使用浏览器专属API（如window、document），必要时用isServer()或isBrowser()工具函数区分环境。
• 如果Stencil组件是作为第三方库引入的，确保库的包中包含了服务端水合所需的模块（通常会在package.json的exports字段中声明）。

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