Angular 服务器端渲染应用的开箱即用的缓存功能问题

简介: Angular 服务器端渲染应用的开箱即用的缓存功能问题

关于通过 Angular Universal 渲染出的页面源代码,我们有两种缓存方式:

  1. HTTP cache

使用网络缓存时,一切都是为了在服务器上设置正确的响应标头。 它们指定缓存生存期和缓存策略。一个例子如下:

Cache-Control: max-age = 31536000

此选项适用于未经授权的区域和存在长时间不变数据的情况。

  1. In Memory cache

内存缓存可用于应用程序本身的渲染页面和 API 请求。 两种使用场合都通过开发包 @ngx-ssr/cache 提供。


将 NgxSsrCacheModule 模块添加到 AppModule 以缓存 API 请求并在浏览器中的服务器上。


maxSize 属性负责最大缓存大小。 值 50 表示缓存将包含超过 50 个来自应用程序的最后 GET 请求。


maxAge 属性负责缓存生命周期。 以毫秒为单位指定。


使用代码如下:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxSsrCacheModule } from '@ngx-ssr/cache';
import { environment } from '../environments/environment';
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxSsrCacheModule.configLruCache({ maxAge: 10 * 60_000, maxSize: 50 }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

例如,同一包@ngx-ssr/cache 中的所有内容都有一个子模块@ngx-ssr/cache/express。 它导入一个 withCache 函数。 该函数是渲染引擎的包装器。使用方法如下:

import { ngExpressEngine } from '@nguniversal/express-engine';
import { LRUCache } from '@ngx-ssr/cache';
import { withCache } from '@ngx-ssr/cache/express';
server.engine(
  'html',
  withCache(
    new LRUCache({ maxAge: 10 * 60_000, maxSize: 100 }),
    ngExpressEngine({
      bootstrap: AppServerModule,
    })
  )
);

虽然可以从服务器渲染静态网站,但这种方法有很多限制,包括代码重复和缺乏灵活性——尤其是在从数据库读取数据时。 幸运的是,Express.js 提供了一种通过模板引擎从服务器端应用程序创建动态 HTML 页面的方法。


模板引擎以一种相当简单的方式工作:创建一个模板,并使用适当的语法将变量传递给它。 然后,在渲染模板的适当路径上,将值分配给模板文件中声明的变量。 这些是在模板渲染时实时编译的。


模板引擎的一个基本特征是它们允许我们创建称为部分的可重用组件,这些组件可以在其他文件中重用。 这有助于防止代码重复并使更改更易于实施。


有各种各样的模板引擎可以与 Express 一起使用。 Express 中的默认模板引擎是 Jade,现在称为 Pug。 但是,Express 中默认安装的 Jade 仍然使用旧版本。


相关文章
|
3天前
|
JavaScript 前端开发
Angular.js 应用中数据模式的删除操作实现
Angular.js 应用中数据模式的删除操作实现
15 0
|
2天前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
10 0
|
3天前
|
资源调度 JavaScript 编译器
显式指定 npm 作为创建 Angular 应用时的包管理器
显式指定 npm 作为创建 Angular 应用时的包管理器
13 1
|
3天前
|
JavaScript 前端开发
关于 Angular.js 应用里的 $scope.$apply()
关于 Angular.js 应用里的 $scope.$apply()
30 8
|
3天前
|
JavaScript 前端开发
Angular.js 应用里如何发送 HTTP 请求
Angular.js 应用里如何发送 HTTP 请求
20 3
|
3天前
|
缓存 监控 中间件
中间件Cache-Aside策略应用程序直接与缓存和数据库进行交互
【5月更文挑战第8天】中间件Cache-Aside策略应用程序直接与缓存和数据库进行交互
23 4
|
3天前
|
弹性计算 负载均衡 容灾
应用阿里云弹性计算:打造高可用性云服务器ECS架构
阿里云弹性计算助力构建高可用云服务器ECS架构,通过实例分布、负载均衡、弹性IP、数据备份及多可用区部署,确保业务连续稳定。自动容错和迁移功能进一步增强容灾能力,提供全方位高可用保障。
70 0
|
3天前
|
存储 缓存 监控
中间件应用合理使用缓存和数据结构
【5月更文挑战第4天】中间件应用合理使用缓存和数据结构
23 3
中间件应用合理使用缓存和数据结构
|
3天前
|
消息中间件 缓存 NoSQL
Redis经典问题:缓存雪崩
本文介绍了Redis缓存雪崩问题及其解决方案。缓存雪崩是指大量缓存同一时间失效,导致请求涌入数据库,可能造成系统崩溃。解决方法包括:1) 使用Redis主从复制和哨兵机制提高高可用性;2) 结合本地ehcache缓存和Hystrix限流降级策略;3) 设置随机过期时间避免同一时刻大量缓存失效;4) 使用缓存标记策略,在标记失效时更新数据缓存;5) 实施多级缓存策略,如一级缓存失效时由二级缓存更新;6) 通过第三方插件如RocketMQ自动更新缓存。这些策略有助于保障系统的稳定运行。
282 1
|
3天前
|
存储 消息中间件 缓存
Redis缓存技术详解
【5月更文挑战第6天】Redis是一款高性能内存数据结构存储系统,常用于缓存、消息队列、分布式锁等场景。其特点包括速度快(全内存存储)、丰富数据类型、持久化、发布/订阅、主从复制和分布式锁。优化策略包括选择合适数据类型、设置过期时间、使用Pipeline、开启持久化、监控调优及使用集群。通过这些手段,Redis能为系统提供高效稳定的服务。