The out of the box caching function of angular server-side rendering applications

About passing Angular Universal Rendered page source code , We have two caching methods ：

1. HTTP cache

When using network cache , It's all about setting the correct response headers on the server . They specify cache lifetime and cache policy . An example is as follows ：

Cache-Control: max-age = 31536000

This option is applicable to unauthorized areas and the presence of long-term unchanging data .

2. In Memory cache

The memory cache can be used for rendering pages and API request . Both use cases through the development kit @ngx-ssr/cache Provide .

take NgxSsrCacheModule Module added to AppModule Caching API Request and on the server in the browser .

maxSize Property is responsible for the maximum cache size . value 50 Indicates that the cache will contain more than 50 The last... From the application GET request .

maxAge Property is responsible for the cache lifecycle . Specifies... 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 , Same package @ngx-ssr/cache There is a sub module for everything in @ngx-ssr/cache/express. It imports a withCache function . This function is the wrapper of the rendering engine . How to use it 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 you can render static websites from the server , But this approach has many limitations , Including code duplication and lack of flexibility —— Especially when reading data from a database . Fortunately, ,Express.js Provides a way to create a dynamic template from a server-side application through a template engine HTML Page method .

The template engine works in a fairly simple way ： Create a template , And pass the variable to it using the appropriate syntax . then , On the appropriate path of the rendering template , Assign values to variables declared in the template file . 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 , These components 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 work with Express Use it together . Express The default template engine in is Jade, Now known as Pug. however ,Express Installed by default in Jade Still use the old version .