rx-angular · eneajaho · Sep 1, 2024 · Aug 20, 2024 · Sep 1, 2024 · Sep 1, 2024
diff --git a/apps/ssr-isr/server.ts b/apps/ssr-isr/server.ts
@@ -31,8 +31,9 @@ export function app(): express.Express {
     browserDistFolder,
     bootstrap,
     commonEngine,
-    modifyGeneratedHtml: defaultModifyGeneratedHtml,
-
+    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,
     // cache: fsCacheHandler,
   });
 
@@ -66,12 +67,11 @@ export function app(): express.Express {
   return server;
 }
 
-const defaultModifyGeneratedHtml: ModifyHtmlCallbackFn = (
+const customModifyGeneratedHtml: ModifyHtmlCallbackFn = (
   req: Request,
   html: string,
 ): string => {
   const time = new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '');
-
   let msg = '<!-- ';
   msg += `\n🚀 ISR: Served from cache! \n⌛ Last updated: ${time}. `;
   msg += ' \n-->';

diff --git a/libs/isr/models/src/isr-handler-config.ts b/libs/isr/models/src/isr-handler-config.ts
@@ -113,6 +113,17 @@ export interface ISRHandlerConfig {
    * which only add commented text to the html to indicate when it was generated.
    */
   modifyGeneratedHtml?: ModifyHtmlCallbackFn;
+
+  /**
+   * If set to true, the server will not wait for storing the rendered page to the cache storage first and will return the rendered HTML as soon as possible.
+   * This can avoid client-side waiting times if the remote cache storage is down.
+   */
+  nonBlockingRender?: boolean;
+
+  /**
+   * If set to true, the server will provide the cached HTML as soon as possible and will revalidate the cache in the background.
+   */
+  backgroundRevalidation?: boolean;
 }
 
 export interface ServeFromCacheConfig {

diff --git a/libs/isr/server/src/cache-generation.ts b/libs/isr/server/src/cache-generation.ts
@@ -103,19 +103,37 @@ export class CacheGeneration {
         // don't do !revalidate because it will also catch "0"
         return { html: finalHtml };
       }
+
       // add the regenerated page to cache
-      await this.cache.add(cacheKey, finalHtml, {
-        revalidate,
-        buildId: this.isrConfig.buildId,
-      });
+      const addToCache = () => {
+        return this.cache.add(cacheKey, finalHtml, {
+          revalidate,
+          buildId: this.isrConfig.buildId,
+        });
+      };
+
+      try {
+        if (this.isrConfig.nonBlockingRender) {
+          // If enabled, add to cache without waiting (fire-and-forget)
+          addToCache();
+        } else {
+          // If not enabled, wait for cache addition to complete before proceeding
+          await addToCache();
+        }
+      } catch (error) {
+        console.error('Error adding to cache:', error);
+      }
+
       if (mode === 'regenerate') {
         // remove from urlsOnHold because we are done
         this.urlsOnHold = this.urlsOnHold.filter((x) => x !== cacheKey);
         this.logger.log(`Url: ${cacheKey} was regenerated!`);
       }
+
       return { html: finalHtml };
     } catch (error) {
       this.logger.log(`Error regenerating url: ${cacheKey}`, error);
+
       if (mode === 'regenerate') {
         // Ensure removal from urlsOnHold in case of error
         this.urlsOnHold = this.urlsOnHold.filter((x) => x !== cacheKey);

diff --git a/libs/isr/server/src/cache-handlers/filesystem-cache-handler.ts b/libs/isr/server/src/cache-handlers/filesystem-cache-handler.ts
@@ -76,14 +76,20 @@ export class FileSystemCacheHandler extends CacheHandler {
 
       if (cachedRoute) {
         // on html field we have saved path to file
-        this.readFromFile(cachedRoute.htmlFilePath).then((html) => {
-          const cacheData: CacheData = {
-            html,
-            options: cachedRoute.options,
-            createdAt: cachedRoute.createdAt,
-          };
-          resolve(cacheData);
-        });
+        this.readFromFile(cachedRoute.htmlFilePath)
+          .then((html) => {
+            const cacheData: CacheData = {
+              html,
+              options: cachedRoute.options,
+              createdAt: cachedRoute.createdAt,
+            };
+            resolve(cacheData);
+          })
+          .catch((err) => {
+            reject(
+              `Error: 💥 Cannot read cache file for route ${route}: ${cachedRoute.htmlFilePath}, ${err}`,
+            );
+          });
       } else {
         reject('Error: 💥 Url is not cached.');
       }

diff --git a/libs/isr/server/src/isr-handler.ts b/libs/isr/server/src/isr-handler.ts
@@ -188,34 +188,42 @@ export class ISRHandler {
         return;
       }
 
-      // Apply the callback if given
-      let finalHtml = html;
-      if (config?.modifyCachedHtml) {
-        const timeStart = performance.now();
-        finalHtml = config.modifyCachedHtml(req, html);
-        const totalTime = (performance.now() - timeStart).toFixed(2);
-        finalHtml += `<!--\nℹ️ ISR: This cachedHtml has been modified with modifyCachedHtml()\n❗️
-        This resulted into more ${totalTime}ms of processing time.\n-->`;
-      }
-
       // Cache exists. Send it.
       this.logger.log(`Page was retrieved from cache: `, cacheKey);
+      let finalHtml = html;
 
       // if the cache is expired, we will regenerate it
       if (cacheConfig.revalidate && cacheConfig.revalidate > 0) {
         const lastCacheDateDiff = (Date.now() - createdAt) / 1000; // in seconds
 
         if (lastCacheDateDiff > cacheConfig.revalidate) {
-          // regenerate the page without awaiting, so the user gets the cached page immediately
-          this.cacheGeneration.generateWithCacheKey(
-            req,
-            res,
-            cacheKey,
-            config?.providers,
-            'regenerate',
-          );
+          const generate = () => {
+            return this.cacheGeneration.generateWithCacheKey(
+              req,
+              res,
+              cacheKey,
+              config?.providers,
+              'regenerate',
+            );
+          };
+
+          try {
+            // regenerate the page without awaiting, so the user gets the cached page immediately
+            if (this.isrConfig.backgroundRevalidation) {
+              generate();
+            } else {
+              const result = await generate();
+              if (result?.html) {
+                finalHtml = result.html;
+              }
+            }
+          } catch (error) {
+            console.error('Error generating html', error);
+            next();
+          }
         }
       }
+
       return res.send(finalHtml);
     } catch (error) {
       // Cache does not exist. Serve user using SSR