这是因为在 Angular SSR/universal 中,服务端渲染出的 HTML 代码是会包含客户端需要获取的数据的,这样客户端服务就能够根据这些数据来执行后续的操作。
为避免这种情况,可以通过在服务端和客户端的 HTTP 通讯过程中使用不同的请求方式来实现客户端的数据获取。具体做法是,服务端使用常规的 HTTP 请求(get, post等),而客户端采用一种不同的异步请求方式(比如 JSONP、WebSocket等)。
代码示例: 服务端请求方式:
app.get('/api/data', (req, res) => {
res.json({ data: 'server side data' });
});
客户端异步请求方式:
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
data: any;
constructor(private http: HttpClient) {}
ngOnInit() {
this.http.jsonp('http://localhost:3000/api/data', 'callback').subscribe(data => {
this.data = data;
});
}
}