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": {