Out of the box caching function of angular server-side rendering application

Time:2022-5-25

For the page source code rendered by angular universal, we have two caching methods:

  1. HTTP cache

When using network caching, everything is to set the correct response header on the server. They specify the cache lifetime and cache policy. An example is as follows:

Cache-Control: max-age = 31536000

This option is applicable to unauthorized areas and situations where there is constant data for a long time.

  1. In Memory cache

The memory cache can be used for rendering pages and API requests of the application itself. Both use cases are through the development package@ngx-ssr/cacheProvide.

Add the ngxssrcachemodule module to the appmodule to cache API requests and on the server in the browser.

The maxsize property is responsible for the maximum cache size. A value of 50 indicates that the cache will contain more than 50 last get requests from the application.

The maxage attribute is responsible for the cache lifecycle. Specified in milliseconds.

The usage code is as follows:

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 {}

For example, all contents in the same package @ NGX SSR / cache have a sub module @ NGX SSR / cache / express. It imports a withcache function. This function is the wrapper of the rendering engine. The usage is as follows:

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,
    })
  )
);

Although static websites can be rendered from the server, this method has many limitations, including code duplication and lack of flexibility — especially when reading data from the database. Fortunately, express JS provides a method to create dynamic HTML pages from server-side applications through template engine.

The template engine works in a fairly simple way: create a template and pass variables to it using the appropriate syntax. Declare the variables in the template and assign them to the appropriate path in the template. These are compiled in real time when the template is rendered.

A basic feature of template engines is that they allow us to create reusable components called parts, which can be reused in other files. This helps prevent code duplication and makes changes easier to implement.

There are a variety of template engines that can be used with express. The default template engine in express is jade, which is now called pug. However, the jade installed by default in express still uses the old version.