Angular Hydration与Prerender兼容问题：启用后为何每次刷新都服务端渲染？

这不是Bug，属于预期行为，核心原因是启用provideClientHydration()后，Angular Universal的默认处理逻辑会优先触发SSR，哪怕预渲染的静态HTML文件已经存在。

背后的逻辑 #

预渲染是在构建阶段生成静态HTML文件，而客户端水合的设计初衷是配合SSR使用——让客户端能复用服务器渲染出的DOM结构，避免重复渲染。当你启用水合后，Universal的默认服务器配置会把SSR作为优先处理路径，忽略已有的预渲染静态文件，导致每次刷新都会走服务端渲染流程。

如何让预渲染和客户端水合共存 #

要实现两者配合工作，你需要调整服务器配置，让它优先返回预渲染的静态文件，只有当静态文件不存在时才回退到SSR。以Angular CLI生成的Express服务器为例，修改server.ts如下：

import { join } from 'path';
import * as fs from 'fs';
import express from 'express';
import { ngExpressEngine } from '@nguniversal/express-engine';

const app = express();
const DIST_FOLDER = join(process.cwd(), 'dist/your-project-name');

// 1. 先配置静态文件服务，优先级高于SSR
app.use(express.static(join(DIST_FOLDER, 'browser'), {
  maxAge: '1y',
  index: false, // 禁用默认返回index.html，手动控制路由
}));

// 2. 配置Angular Universal引擎
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
}));
app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

// 3. 处理所有路由请求
app.get('*', (req, res) => {
  // 拼接预渲染文件的路径
  const prerenderedFile = join(DIST_FOLDER, 'browser', req.path, 'index.html');
  
  // 如果预渲染文件存在，直接返回静态文件
  if (fs.existsSync(prerenderedFile)) {
    res.sendFile(prerenderedFile);
  } else {
    // 否则触发SSR渲染
    res.render('index', { req });
  }
});

额外注意点 #

• 确保预渲染的HTML文件包含ng-server-context属性（Angular 16+预渲染时会自动添加），这是客户端水合识别DOM结构的关键标识。
• 对于带动态参数的路由（比如/product/:id），预渲染无法生成静态文件，这类请求会自动回退到SSR，这是正常的。

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