Configured ISR and added revalidate key to route data

package.json

@@ -75,6 +75,7 @@
     "express": "^4.15.2",
     "firebase-admin": "^9.11.0",
     "firebase-functions": "^3.15.1",
+    "ngx-isr": "^0.5.1",
     "rxjs": "^7.5.5",
     "tslib": "^2.3.1",
     "zone.js": "~0.11.4"
@@ -101,7 +102,7 @@
     "@size-limit/file": "^7.0.5",
     "@types/compression": "^1.7.1",
     "@types/express": "^4.17.0",
-    "@types/node": "^12.11.1",
+    "@types/node": "^14.18.36",
     "@types/yargs": "^17.0.7",
     "@typescript-eslint/eslint-plugin": "^5.29.0",
     "@typescript-eslint/parser": "^5.29.0",

projects/movies/src/app/app.routing.ts

@@ -30,6 +30,7 @@ export const ROUTES: Routes = [
   {
     path: 'list/:type/:identifier',
     component: MovieListPageComponent,
+    data: { revalidate: 60 },
     /* loadComponent: () =>
       import('projects/movies/src/app/pages/movie-list-page/movie-list-page.component').then((m) => m.MovieListPageComponent)
     */
@@ -40,34 +41,39 @@ export const ROUTES: Routes = [
       import(
         'projects/movies/src/app/pages/movie-detail-page/movie-detail-page.component'
       ).then((c) => c.MovieDetailPageComponent),
+    data: { revalidate: 60 },
   },
   {
     path: 'detail/list/:identifier',
     loadComponent: () =>
       import(
         'projects/movies/src/app/pages/account-feature/list-detail-page/list-detail-page.component'
       ).then((c) => c.ListDetailPageComponent),
+    data: { revalidate: 60 },
   },
   {
     path: 'detail/person/:identifier',
     loadComponent: () =>
       import(
         'projects/movies/src/app/pages/person-detail-page/person-detail-page.component'
       ).then((c) => c.PersonDetailPageComponent),
+    data: { revalidate: 60 },
   },
   {
     path: 'account',
     loadChildren: () =>
       import(
         'projects/movies/src/app/pages/account-feature/account-featuer-page.routes'
       ).then((c) => c.ROUTES),
+    data: { revalidate: 60 },
   },
   {
     path: 'page-not-found',
     loadComponent: () =>
       import(
         'projects/movies/src/app/pages/not-found-page/not-found-page.component'
       ).then((c) => c.NotFoundPageComponent),
+    data: { revalidate: 60 },
   },
   {
     path: '**',

projects/movies/src/app/ssr/app.server.module.ts

@@ -3,10 +3,15 @@ import { APP_SERVER_PROVIDERS } from './app.server.provider';
 import { APP_SERVER_IMPORTS } from './app.server.imports';
 import { APP_COMPONENT_IMPORTS, AppComponent } from '../app.component';
 import { RXA_PROVIDER_SSR } from '../shared/rxa-custom/rxa.provider.ssr';
+import { NgxIsrModule } from 'ngx-isr';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [APP_SERVER_IMPORTS, APP_COMPONENT_IMPORTS],
+  imports: [
+    APP_SERVER_IMPORTS,
+    APP_COMPONENT_IMPORTS,
+    NgxIsrModule.forRoot(),
+  ],
   providers: [APP_SERVER_PROVIDERS, RXA_PROVIDER_SSR],
   bootstrap: [AppComponent],
 })

projects/movies/tsconfig.json

@@ -5,9 +5,6 @@
   "references": [
     {
       "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
     }
   ]
 }

server.ts

@@ -6,8 +6,9 @@ import { join } from 'path';
 import * as compressionModule from 'compression';
 
 import { AppServerModule } from './projects/movies/src/main.server';
-import { APP_BASE_HREF } from '@angular/common';
 import { existsSync } from 'fs';
+import { ISRHandler } from 'ngx-isr';
+import { environment } from 'projects/movies/src/environments/environment';
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {
@@ -18,6 +19,12 @@ export function app(): express.Express {
     ? 'index.original.html'
     : 'index';
 
+  const isr = new ISRHandler({
+    indexHtml,
+    invalidateSecretToken: 'MY_TOKEN',
+    enableLogging: !environment.production,
+  });
+
   // patchWindow(indexHtml);
 
   // **🚀 Perf Tip:**
@@ -48,20 +55,13 @@ export function app(): express.Express {
     })
   );
 
-  // All regular routes use the Universal engine
-  server.get('*', (req, res) => {
-    // return rendered HTML including Angular generated DOM
-    console.log('SSR for route', req.url);
-    res.render(indexHtml, {
-      req,
-      providers: [
-        {
-          provide: APP_BASE_HREF,
-          useValue: req.baseUrl,
-        },
-      ],
-    });
-  });
+  server.get(
+    '*',
+    // Serve page if it exists in cache
+    async (req, res, next) => await isr.serveFromCache(req, res, next),
+    // Server side render the page and add to cache if needed
+    async (req, res, next) => await isr.render(req, res, next)
+  );
 
   return server;
 }

tsconfig.node.json

@@ -1,6 +1,6 @@
 {
   // This is an alias to @tsconfig/node12: https://github.com/tsconfig/bases
-  "extends": "ts-node/node12/tsconfig.json",
+  "extends": "ts-node/node14/tsconfig.json",
 
   // Most ts-node options can be specified here using their programmatic names.
   "ts-node": {