How to configure cache in Angular Universal - node.js

Question

I followed a tutorial for integrating Universal in our Angular 9 app.
Now we have server.ts configured.
In every tutorial I see this:
// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
and then:
server.get(
'*.*',
express.static(distFolder, {
maxAge: '1y',
})
);
If we leave it like that I suppose every request is cached, also what goes to /api. Is this right?
Our app has lots of "product pages" where stock and price could change frequently. So we need to have always fresh stock and price. For this reason I wouldn't cache data from server that is returned from our API calls that are in "/api/" path (or https://api.my-app.com" if absolute path is needed). Leaving everything like written above should cache everything, if I'm not wrong. I made a test changing a price directly in the database and I expected to see the old one, but it's not like that, I see always the fresh one.
So my doubt is that cache mechanism dosn't work. And also when I navigate through components I continue to see every api calls (not cached)
Can anybody explain me better this mechanism please?
Another question about this is: If cache works, how to clear it in node? Node caches in memory everything. I supposed cache would be cleared when we stop node. Is this right?
This is my package json:
"scripts": {
"ng": "node --max_old_space_size=8192 node_modules/#angular/cli/bin/ng",
"start": "npm run ng -- serve",
"serve:server": "node ./dist-server/main.js",
"serve:server:debug": "node --inspect ./dist-server/main.js",
"start:server": "npm run build:server && node ./dist-server/main.js",
"start:server:debug": "npm run build:server && node ./dist-server/main.js --inspect",
"build": "npm run ng -- build",
"build:server": "ng run my-app:server:production",
"ssr:watch": "ng run my-app:serve-ssr:production",
"demo:ssr:watch": "ng run universal-demo:serve-ssr:dev",
"build-all": "npm-run-all build-production build:server-app:prod",
"start:express-server": "ts-node -P ./src/tsconfig.server.json ./server.ts",
"prerender": "ts-node -P ./server.tsconfig.json ./prerender.ts",
"prerender:debug": "ts-node -P ./server.tsconfig.json --inspect ./prerender.ts",
"test": "npm run ng -- test",
"lint": "npm run ng -- lint",
"e2e": "npm run ng -- e2e",
"analyze": "webpack-bundle-analyzer dist/stats.json",
"compodoc": "npx compodoc -p src/tsconfig.app.json",
"build:stats": "ng build --stats-json --prod",
"build-preprod": "ng build --configuration preprod --index=/src/index/preprod/index.html",
"build-production": "ng build --configuration production --index=/src/index/production/index.html",
"build-staging": "ng build --configuration staging --index=/src/index/staging/index.html"
}
This is my angular.json:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"aot": true,
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"stylePreprocessorOptions": {
"includePaths": ["src/assets/sass"]
},
"assets": [
"src/assets",
"src/favicon.ico",
"src/manifest.json",
"src/firebase-messaging-sw.js",
"src/main-sw.js",
"src/assets/js/intersection-observer.js"
],
"styles": [
"src/styles/styles.scss",
"src/styles/my-app.scss",
"node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [],
"es5BrowserSupport": true
},
"configurations": {
"staging": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"ngswConfigPath": "src/app/config/ngsw-config.json",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
],
"serviceWorker": true
},
"preprod": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"ngswConfigPath": "src/app/config/ngsw-config.json",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.preprod.ts"
}
],
"serviceWorker": true
},
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"extractCss": true,
"namedChunks": true,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"ngswConfigPath": "src/app/config/ngsw-config.json",
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"serviceWorker": true
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "my-app:build"
},
"configurations": {
"production": {
"browserTarget": "my-app:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "my-app:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": ["src/styles.scss"],
"scripts": [],
"assets": ["src/favicon.ico", "src/assets"]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
"exclude": ["**/node_modules/**"]
}
},
"server": {
"builder": "#angular-devkit/build-angular:server",
"options": {
"outputPath": "dist-server",
"main": "server.ts",
"tsConfig": "src/tsconfig.server.json",
"stylePreprocessorOptions": {
"includePaths": ["src/assets/sass"]
}
},
"configurations": {
"dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true
},
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true
}
}
},
"serve-ssr": {
"builder": "#nguniversal/builders:ssr-dev-server",
"options": {
"browserTarget": "my-app:build",
"serverTarget": "my-app:server"
},
"configurations": {
"production": {
"browserTarget": "my-app:build:production",
"serverTarget": "my-app:server:production"
}
}
},
"prerender": {
"builder": "#nguniversal/builders:prerender",
"options": {
"browserTarget": "my-app:build:production",
"serverTarget": "my-app:server:production",
"routes": ["/"]
},
"configurations": {
"production": {}
}
}
}
},
"my-app-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "my-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "my-app:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": ["**/node_modules/**"]
}
}
}
}
},
"defaultProject": "my-app"
}
Thanks

Answer 1

The following code applies to static files which are located in the dist/browser directory after building the project. These are mostly JavaScript, CSS and image files. The maxAge will set the Cache-Control header which indicates the maximum amount of time the file will be considered fresh. Again, this only applies to serving the files in dist/browser which will never change.
server.get(
'*.*',
express.static(distFolder, {
maxAge: '1y',
})
);
The following code is included just as an example of how additional endpoints can be added to the Express server: https://expressjs.com/en/guide/routing.html. It does not have anything to do with caching.
// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
The following code is what renders the HTML response using the Angular app. There is no caching provided for this in the default implementation because it would differ depending on how frequently content changes in your app.
server.get('*', (req, res) => {
res.render(
indexHtml,
{
req,
providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }]
});
});
Here's some pseudocode of how caching could be implemented. The cache variable could be an in-memory cache like Redis or some other implementation.
server.get('*',
// Middleware to check if cached response exists
(req, res, next) => {
const cachedHtml = cache.get(req.url);
if (cachedHtml) {
// Cache exists. Send it.
res.send(cachedHtml);
} else {
// Cache does not exist. Render a response using the Angular app
next();
}
},
// Angular SSR rendering
(req, res) => {
res.render(
indexHtml,
{
req,
providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }]
},
(err: Error, html: string) => {
// Cache the rendered `html` for this request url to use for subsequent requests
cache.set(req.url, html);
res.send(html);
}
);
}
);