Angualr的AoT编译与SSR渲染的差异是否仅限于数据绑定？
不仅仅是数据绑定，还有其他方面的差异，比如组件生命周期的执行顺序、服务端和客户端路由的处理方式等。下面的代码示例演示了 SSR 渲染和 AoT 编译的差异：
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template:
})
export class AppComponent {
title = 'My App';
constructor() {
console.log('AppComponent constructor');
}
ngOnInit() {
console.log('AppComponent ngOnInit');
}
ngOnDestroy() {
console.log('AppComponent ngOnDestroy');
}
}{{ title }}
// server.ts
import { enableProdMode } from '@angular/core'; import { renderModule } from '@angular/platform-server'; import { AppServerModule } from './app/app.server.module';
enableProdMode();
const html = renderModule(AppServerModule, {
document: '
console.log(html);
// console output // AppComponent constructor // AppComponent ngOnInit // AppComponent ngOnDestroy
对比上面的代码，我们可以发现，无论是 SSR 还是 AoT 编译，组件的构造函数和生命周期钩子都会被调用。但是，SSR 渲染会在服务端执行这些钩子，而 AoT 编译则是在客户端执行。这就导致了 SSR 渲染的组件生命周期顺序和客户端渲染的不同，需要开发者注意。