feat(isr): update the example to show modifyGeneratedHtml usage

rx-angular · eneajaho · Aug 31, 2024 · Aug 23, 2024 · Aug 23, 2024 · Aug 29, 2024
commit 378159da813ca3d6af20feb87af65d2b95816e3c
diff --git a/apps/ssr-isr/server.ts b/apps/ssr-isr/server.ts
@@ -1,6 +1,7 @@
 import { CommonEngine } from '@angular/ssr';
+import { modifyHtmlCallbackFn } from '@rx-angular/isr/models';
 import { ISRHandler } from '@rx-angular/isr/server';
-import express from 'express';
+import express, { Request } from 'express';
 import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { RESPONSE } from './src/app/redirect.component';
@@ -30,6 +31,7 @@ export function app(): express.Express {
    browserDistFolder,
    bootstrap,
    commonEngine,
+    modifyGeneratedHtml: customModifyGeneratedHtml,
    // cache: fsCacheHandler,
  });

@@ -72,6 +74,22 @@ export function app(): express.Express {
  return server;
 }

+const customModifyGeneratedHtml: modifyHtmlCallbackFn = (
+  req: Request,
+  html: string,
+  revalidateTime?: number | null,
+): string => {
+  const time = new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '');
+
+  let msg = '<!-- ';
+  msg += `\n🚀 ISR: Served from cache! \n⌛ Last updated: ${time}. `;
+  if (revalidateTime)
+    msg += `\n⏭️ Next refresh is after ${revalidateTime} seconds. `;
+  msg += ' \n-->';
+  html = html.replace('Original content', 'Modified content');
+  return html + msg;
+};
+
 function run(): void {
  const port = process.env['PORT'] || 4000;


diff --git a/apps/ssr-isr/src/app/dynamic.component.ts b/apps/ssr-isr/src/app/dynamic.component.ts
@@ -8,11 +8,18 @@ import { map, switchMap } from 'rxjs';
  selector: 'app-dynamic-page',
  template: `
    @if (post$ | async; as post) {
+      <div>
+        <h2>{{ post.title }}</h2>
+        <p>{{ post.body }}</p>
+      </div>
+    }
    <div>
-      <h2>{{ post.title }}</h2>
-      <p>{{ post.body }}</p>
+      <h2>
+        Dynamically Modification (controlled by modifyGeneratedHtml in
+        ISRHandlerConfig)
+      </h2>
+      <p>Original content</p>
    </div>
-    }
  `,
  imports: [AsyncPipe],
  standalone: true,
@@ -22,14 +29,14 @@ export class DynamicPageComponent {
  private http = inject(HttpClient);

  private postId$ = inject(ActivatedRoute).params.pipe(
-    map((p) => p['id'] as string)
+    map((p) => p['id'] as string),
  );

  post$ = this.postId$.pipe(
    switchMap((id) =>
      this.http.get<{ title: string; body: string }>(
-        `https://jsonplaceholder.typicode.com/posts/${id}`
-      )
-    )
+        `https://jsonplaceholder.typicode.com/posts/${id}`,
+      ),
+    ),
  );
 }