如何删除 Angular SSR 应用 State Transfer 嵌入到 HTML 里的某些字段

简介: 如何删除 Angular SSR 应用 State Transfer 嵌入到 HTML 里的某些字段

笔者这篇文章介绍了 Angular SSR 应用 State Transfer 的工作机制和错误排查方法。


SSR 服务器端发送给客户端 response 里包含的 State Transfer 数据的一个例子如下:


<script id="serverApp-state" type="application/json">
...
&q;headers&q;:{&q;date&q;:[&q;Fri, 05 Mar 2021 12:44:26 GMT&q;],&q;content-type&q;:[&q;application/json; charset=utf-8&q;],&q;content-length&q;:[&q;2933&q;],&q;connection&q;:[&q;keep-alive&q;],&q;server&q;:[&q;nginx/1.18.0&q;],&q;vary&q;:[&q;origin,accept-encoding&q;],&q;cache-control&q;:[&q;no-cache&q;],&q;accept-ranges&q;:[&q;bytes&q;]}
...
</script>

如果我们的需求是在这个 response 里删除部分字段,可以参考这篇文章的做法。


TransferHttpCacheModule 是 Angular Universal 的一部分,它在服务器端渲染(SSR)环境中非常有用。这个模块的主要目的是优化页面的加载时间,特别是在首次加载页面时。


在没有使用 TransferHttpCacheModule 的情况下,当应用在服务器端渲染后发送给客户端时,客户端会再次执行相同的 HTTP 请求以获取数据。这意味着同一份数据会被请求两次,一次在服务器端,一次在客户端。这将导致不必要的网络请求,从而影响页面的加载时间和用户体验。


这就是 TransferHttpCacheModule 的作用之处。通过使用这个模块,当应用在服务器端渲染时执行的 HTTP 请求的响应数据将被缓存,并随着渲染后的页面一起发送给客户端。然后,客户端应用在执行相同的 HTTP 请求时,会先检查是否有缓存的响应数据,如果有,它将直接使用这些数据,而不是向服务器发送另一个请求。


这样做的好处是显而易见的:减少了不必要的网络请求,加快了页面的加载速度,改善了用户体验。


下面是一个简单的示例来说明如何使用 TransferHttpCacheModule:


首先,你需要在服务器端的 AppModule 中导入 TransferHttpCacheModule。这通常在 app.server.module.ts 文件中完成:

import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { TransferHttpCacheModule } from '@nguniversal/common';
@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ServerTransferStateModule,
    TransferHttpCacheModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

在这个例子中,我们同时导入了 ServerModule 和 ServerTransferStateModule,这些都是在服务器端渲染应用时需要的模块。我们也导入了 TransferHttpCacheModule,这是我们用来缓存 HTTP 请求响应的模块。


然后,在你的服务中,你可以像平常一样进行 HTTP 请求:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}
  getData() {
    return this.http.get('https://example.com/api/data');
  }
}

在这个服务中,我们使用 HttpClient 来获取数据。当这个服务在服务器端运行时,由于我们已经在服务器端的 AppModule 中导入了 TransferHttpCacheModule,所以这个请求的响应数据将被自动缓存。

相关文章
|
1月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
24 2
|
6天前
|
JavaScript
Vue中嵌入原生HTML页面的方法
Vue中嵌入原生HTML页面的方法
11 0
|
27天前
|
算法 容器
HTML5-框架-计算机应用2115-2022年11月17日13:57:13
HTML5-框架-计算机应用2115-2022年11月17日13:57:13
21 0
|
1月前
|
Go
Mac安装Angular并部署运行应用
Mac安装Angular并部署运行应用
|
1月前
|
前端开发
SAP UI5 应用如何使用 iframe 嵌入其他 HTML 页面试读版
SAP UI5 应用如何使用 iframe 嵌入其他 HTML 页面试读版
19 0
|
2月前
|
数据采集 安全 JavaScript
​HTML代码混淆技术:原理、应用和实现方法详解
​HTML代码混淆技术:原理、应用和实现方法详解
19 0
|
2月前
|
缓存 前端开发 JavaScript
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
38 0
|
2月前
|
缓存 JavaScript 前端开发
Angular PWA 应用什么情况下会出现 504 error
Angular PWA 应用什么情况下会出现 504 error
46 0
|
3天前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
3天前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。