rx-angular · maxisam · Aug 20, 2024 · Aug 20, 2024 · Aug 20, 2024 · Aug 22, 2024
diff --git a/apps/docs/docs/isr/cache-handlers.md b/apps/docs/docs/isr/cache-handlers.md
@@ -71,85 +71,63 @@ export class RedisCacheHandler extends CacheHandler {
 
     this.redis = new Redis(this.options.connectionString);
     console.log('RedisCacheHandler initialized 🚀');
+    options.keyPrefix = options.keyPrefix || 'isr';
   }
 
-  add(
-    url: string,
-    html: string,
-    options: ISROptions = { revalidate: null }
-  ): Promise<void> {
-    const htmlWithMsg = html + cacheMsg(options.revalidate);
-
-    return new Promise((resolve, reject) => {
-      const cacheData: CacheData = {
-        html: htmlWithMsg,
-        options,
-        createdAt: Date.now(),
-      };
-      const key = this.createKey(url);
-      this.redis.set(key, JSON.stringify(cacheData)).then(() => {
-        resolve();
-      });
+  add(cacheKey: string, html: string | Buffer, options: ISROptions = { revalidate: null }): Promise<void> {
+    const key = this.createKey(cacheKey);
+    const createdAt = Date.now().toString();
+    await this.redis.hmset(key, {
+      html,
+      revalidate: config.revalidate ? config.revalidate.toString() : '',
+      buildId: config.buildId || '',
+      createdAt,
     });
   }
 
-  get(url: string): Promise<CacheData> {
-    return new Promise((resolve, reject) => {
-      const key = this.createKey(url);
-      this.redis.get(key, (err, result) => {
-        if (err || result === null || result === undefined) {
-          reject('This url does not exist in cache!');
-        } else {
-          resolve(JSON.parse(result));
-        }
-      });
-    });
+  // in this example, it is assumed that the html is stored as a buffer, use hgetall if it is stored as a string
+  async get(cacheKey: string): Promise<CacheData> {
+    const key = this.createKey(cacheKey);
+    const data = await this.redis.hgetallBuffer(key);
+    if (Object.keys(data).length > 0) {
+      const revalidate = data['revalidate'] ? parseInt(data['revalidate'].toString(), 10) : null;
+      return {
+        html: data['html'],
+        options: {
+          revalidate,
+          buildId: data['buildId'].toString() || null,
+        },
+        createdAt: parseInt(data['createdAt'].toString(), 10),
+      } as CacheData;
+    } else {
+      this.logger.info(`Cache with key ${cacheKey} not found`);
+      throw new Error(`Cache with key ${cacheKey} not found`);
+    }
   }
 
-  getAll(): Promise<string[]> {
-    console.log('getAll() is not implemented for RedisCacheHandler');
-    return Promise.resolve([]);
+  async getAll(): Promise<string[]> {
+    return await this.redis.keys(`${this.redisCacheOptions.keyPrefix}:*`);
   }
 
-  has(url: string): Promise<boolean> {
-    return new Promise((resolve, reject) => {
-      const key = this.createKey(url);
-      resolve(this.redis.exists(key).then((exists) => exists === 1));
-    });
+  async has(cacheKey: string): Promise<boolean> {
+    const key = this.createKey(cacheKey);
+    return (await this.redis.exists(key)) === 1;
   }
 
-  delete(url: string): Promise<boolean> {
-    return new Promise((resolve, reject) => {
-      const key = this.createKey(url);
-      resolve(this.redis.del(key).then((deleted) => deleted === 1));
-    });
+  async delete(cacheKey: string): Promise<boolean> {
+    const key = this.createKey(cacheKey);
+    return (await this.redis.del(key)) === 1;
   }
 
-  clearCache?(): Promise<boolean> {
-    throw new Error('Method not implemented.');
+  async clearCache(): Promise<boolean> {
+    await this.redis.flushdb();
+    return true;
   }
 
-  private createKey(url: string): string {
-    const prefix = this.options.keyPrefix || 'isr';
-    return `${prefix}:${url}`;
+  private createKey(cacheKey: string): string {
+    return `${this.redisCacheOptions.keyPrefix}:${cacheKey}`;
   }
 }
-
-const cacheMsg = (revalidateTime?: number | null): string => {
-  const time = new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '');
-
-  let msg = '<!-- ';
-
-  msg += `\n🚀 ISR: Served from Redis Cache! \n⌛ Last updated: ${time}. `;
-
-  if (revalidateTime) {
-    msg += `\n⏭️ Next refresh is after ${revalidateTime} seconds. `;
-  }
-
-  msg += ' \n-->';
-
-  return msg;
-};
 ```
 
 And then, to register the cache handler, you need to pass it to the `cache` field in ISRHandler:
@@ -203,15 +181,22 @@ The `CacheHandler` abstract class has the following API:
 
 ```typescript
 export abstract class CacheHandler {
-  abstract add(url: string, html: string, options: ISROptions): Promise<void>;
+  // html could be a string or a buffer, it is depending on if `compressHtml` is set in `ISRHandler` config.
+  // if `compressHtml` is set, the html will be a buffer, otherwise it will be a string
+  abstract add(
+    cacheKey: string,
+    // it will be buffer when we use compressHtml
+    html: string | Buffer,
+    config?: CacheISRConfig,
+  ): Promise<void>;
 
-  abstract get(url: string): Promise<CacheData>;
+  abstract get(cacheKey: string): Promise<CacheData>;
 
-  abstract getAll(): Promise<string[]>;
+  abstract has(cacheKey: string): Promise<boolean>;
 
-  abstract has(url: string): Promise<boolean>;
+  abstract delete(cacheKey: string): Promise<boolean>;
 
-  abstract delete(url: string): Promise<boolean>;
+  abstract getAll(): Promise<string[]>;
 
   abstract clearCache?(): Promise<boolean>;
 }
@@ -223,8 +208,11 @@ The `CacheData` interface is used to store the cached pages in the cache handler
 
 ```typescript
 export interface CacheData {
-  html: string;
+  html: string | Buffer;
   options: ISROptions;
   createdAt: number;
 }
 ```
+
+**note**: The `html` field can be a string or a buffer. It depends on if you set `compressHtml` function in the `ISRHandler` options.
+If it is set, the html will be compressed and stored as a buffer. If it is not set, the html will be stored as a string.
diff --git a/apps/docs/docs/isr/cache-hooks.md b/apps/docs/docs/isr/cache-hooks.md
@@ -14,13 +14,13 @@ To do that, you can use the `modifyCachedHtml` and `modifyGeneratedHtml` callbac
 
 ### modifyCachedHtml
 
-The `modifyCachedHtml` callback is called when the html is served from cache (on every user request). It receives the request and the cached html as parameters. It should return the modified html.
+The `modifyCachedHtml` callback is called when the html is served from cache (on every user request). It receives the request and the cached html as parameters. It should return the modified html. However, if compressHtml is set, this callback will not be called, since the cached html is compressed and cannot be modified.
 
 ### modifyGeneratedHtml
 
 The `modifyGeneratedHtml` callback is called when the html is generated on the fly (before the cache is stored). It receives the request and the generated html as parameters. It should return the modified html.
 
-### Example
+#### Example
 
 ```ts
 server.get(
@@ -55,3 +55,7 @@ server.get(
 :::caution **Important:**
 Use these methods with caution as the logic written can increase the processing time.
 :::
+
+### compressHtml (> v18.1.0)
+
+A compression callback can be provided to compress the HTML before storing it in the cache. If not provided, the HTML will be stored without compression. When provided, the HTML will be compressed and stored as Buffer | string in the cache (depending on how cache handler is implemented. Default examples use Buffer). Note that this will disable the modifyCachedHtml callback, as compressed HTML cannot be modified.
diff --git a/apps/docs/docs/isr/compression.md b/apps/docs/docs/isr/compression.md
@@ -0,0 +1,54 @@
+---
+sidebar_label: Compression
+sidebar_position: 12
+title: Compression
+---
+
+## Why Compression?
+
+Caching pages on the server can lead to high memory usage, especially when caching a large number of pages. Even when caching pages on disk, reading them from disk and sending them to the client can result in high disk I/O usage.
+
+Typically, reverse proxies like Nginx are used to compress responses before sending them to clients. However, if we compress cached pages and serve them as compressed responses, we eliminate the need to compress them every time in Nginx, reducing server load and improving performance.
+
+## How to Use Compression
+
+You can enable compression by setting the `compressHtml` property in `ISRHandlerConfig` to a compression callback function. This function will be called with the HTML content of the page and should return the compressed HTML content. The signature of the function is:
+
+```typescript
+export type CompressHtmlFn = (html: string) => Promise<Buffer>;
+```
+
+### Example
+
+```typescript
+import { ISRHandler } from '@rx-angular/isr';
+import { CompressHtmlFn } from '@rx-angular/isr/models';
+import * as zlib from 'zlib';
+
+// Example compressHtml function
+const compressHtml: CompressHtmlFn = (html: string): Promise<Buffer> => {
+  return new Promise((resolve, reject) => {
+    zlib.gzip(html, (err, buffer) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve(buffer);
+      }
+    });
+  });
+};
+
+// ISRHandler configuration
+const isr = new ISRHandler({
+  indexHtml,
+  // other options omitted for brevity
+  compressHtml: compressHtml, // compress the HTML before storing in cache
+  htmlCompressionMethod: 'gzip', // specify the compression method, default is 'gzip'
+});
+```
+
+## Important Notes
+
+- **HTML Parameter Type**: With compression enabled, the type of the `html` parameter in `CacheHandler` will be `Buffer` instead of `string`.
+- **Content-Encoding Header**: The `htmlCompressionMethod` property is used for the `Content-Encoding` header and should match the compression method used in the `compressHtml` function.
+- **Modify Cached HTML**: The `modifyCachedHtml` function will be ignored when `compressHtml` is set, since it is not possible to modify the compressed cached HTML content without decompressing it first.
diff --git a/apps/ssr-isr/server.ts b/apps/ssr-isr/server.ts
@@ -1,6 +1,11 @@
 import { CommonEngine } from '@angular/ssr';
 import { ModifyHtmlCallbackFn } from '@rx-angular/isr/models';
-import { ISRHandler } from '@rx-angular/isr/server';
+import {
+  compressHtml,
+  CompressStaticFilter,
+  ISRHandler,
+} from '@rx-angular/isr/server';
+import compression from 'compression';
 import express, { Request } from 'express';
 import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -34,9 +39,12 @@ export function app(): express.Express {
     backgroundRevalidation: true, // will revalidate in background and serve the cache page first
     nonBlockingRender: true, // will serve page first and store in cache in background
     modifyGeneratedHtml: customModifyGeneratedHtml,
+    compressHtml: compressHtml, // compress the html before storing in cache
+    // cacheHtmlCompressionMethod: 'gzip', // compression method for cache
     // cache: fsCacheHandler,
   });
-
+  // compress js|css files
+  server.use(compression({ filter: CompressStaticFilter }));
   server.use(express.json());
 
   server.post(

diff --git a/libs/isr/models/src/cache-handler.ts b/libs/isr/models/src/cache-handler.ts
@@ -10,8 +10,10 @@ export interface CacheISRConfig {
   errors?: string[];
 }
 
+// html could be a string or a buffer, it is depending on if `compressHtml` is set in `ISRHandler` config.
+// if `compressHtml` is set, the html will be a buffer, otherwise it will be a string
 export interface CacheData {
-  html: string;
+  html: string | Buffer;
   options: CacheISRConfig;
   createdAt: number;
 }
@@ -29,9 +31,12 @@ export interface VariantRebuildItem {
 }
 
 export abstract class CacheHandler {
+  // html could be a string or a buffer, it is depending on if `compressHtml` is set in `ISRHandler` config.
+  // if `compressHtml` is set, the html will be a buffer, otherwise it will be a string
   abstract add(
     cacheKey: string,
-    html: string,
+    // it will be buffer when we use compressHtml
+    html: string | Buffer,
     config?: CacheISRConfig,
   ): Promise<void>;
 

diff --git a/libs/isr/models/src/index.ts b/libs/isr/models/src/index.ts
@@ -8,6 +8,7 @@ export {
 } from './cache-handler';
 export {
   CacheKeyGeneratorFn,
+  CompressHtmlFn,
   InvalidateConfig,
   ISRHandlerConfig,
   ModifyHtmlCallbackFn,

diff --git a/libs/isr/models/src/isr-handler-config.ts b/libs/isr/models/src/isr-handler-config.ts
@@ -125,6 +125,19 @@ export interface ISRHandlerConfig {
    */
   backgroundRevalidation?: boolean;
 
+  /**
+   * A compression callback can be provided to compress the HTML before storing it in the cache.
+   * If not provided, the HTML will be stored without compression.
+   * When provided, the HTML will be compressed and stored as Buffer | string in the cache
+   * (depending on how cache handler is implemented. Default examples use Buffer)
+   * Note that this will disable the modifyCachedHtml callback, as compressed HTML cannot be modified.
+   **/
+  compressHtml?: CompressHtmlFn;
+
+  /**
+   * Cached Html compression method, it will use gzip by default if not provided.
+   */
+  htmlCompressionMethod?: string;
   /**
    * This callback lets you use custom cache key generation logic. If not provided, it will use the default cache key generation logic.
    */
@@ -192,3 +205,5 @@ export interface RenderConfig {
 export interface RouteISRConfig {
   revalidate?: number | null;
 }
+
+export type CompressHtmlFn = (html: string) => Promise<Buffer>;
diff --git a/libs/isr/server/src/cache-generation.ts b/libs/isr/server/src/cache-generation.ts
@@ -13,7 +13,7 @@ import { getRouteISRDataFromHTML } from './utils/get-isr-options';
 import { renderUrl, RenderUrlConfig } from './utils/render-url';
 
 export interface IGeneratedResult {
-  html?: string;
+  html?: string | Buffer;
   errors?: string[];
 }
 
@@ -56,7 +56,6 @@ export class CacheGeneration {
 
     return this.generateWithCacheKey(req, res, cacheKey, providers, mode);
   }
-
   async generateWithCacheKey(
     req: Request,
     res: Response,
@@ -77,7 +76,6 @@ export class CacheGeneration {
 
       this.urlsOnHold.push(cacheKey);
     }
-
     const renderUrlConfig: RenderUrlConfig = {
       req,
       res,
@@ -89,17 +87,19 @@ export class CacheGeneration {
       browserDistFolder: this.isrConfig.browserDistFolder,
       inlineCriticalCss: this.isrConfig.inlineCriticalCss,
     };
-
     try {
       const html = await renderUrl(renderUrlConfig);
       const { revalidate, errors } = getRouteISRDataFromHTML(html);
 
       // Apply the modify generation callback
       // If undefined, use the default modifyGeneratedHtml function
-      const finalHtml = this.isrConfig.modifyGeneratedHtml
+      let finalHtml: string | Buffer = this.isrConfig.modifyGeneratedHtml
         ? this.isrConfig.modifyGeneratedHtml(req, html, revalidate)
         : defaultModifyGeneratedHtml(req, html, revalidate);
-
+      // Apply the compressHtml callback
+      if (this.isrConfig.compressHtml) {
+        finalHtml = await this.isrConfig.compressHtml(finalHtml);
+      }
       // if there are errors, don't add the page to cache
       if (errors?.length && this.isrConfig.skipCachingOnHttpError) {
         // remove url from urlsOnHold because we want to try to regenerate it again