rx-angular · maxisam · Aug 20, 2024 · Aug 20, 2024 · Aug 20, 2024 · Aug 22, 2024
diff --git a/apps/ssr-isr/server.ts b/apps/ssr-isr/server.ts
@@ -31,6 +31,8 @@ export function app(): express.Express {
    browserDistFolder,
    bootstrap,
    commonEngine,
+    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,
  });

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 with very low performance impact
   */
  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
@@ -100,10 +100,17 @@ export class CacheGeneration {
        return { html: finalHtml };
      }
      // add the regenerated page to cache
-      await this.cache.add(cacheKey, finalHtml, {
-        revalidate,
-        buildId: this.isrConfig.buildId,
-      });
+      if (this.isrConfig.nonBlockingRender) {
+        this.cache.add(cacheKey, finalHtml, {
+          revalidate,
+          buildId: this.isrConfig.buildId,
+        });
+      } else {
+        await this.cache.add(cacheKey, finalHtml, {
+          revalidate,
+          buildId: this.isrConfig.buildId,
+        });
+      }
      if (mode === 'regenerate') {
        // remove from urlsOnHold because we are done
        this.urlsOnHold = this.urlsOnHold.filter((x) => x !== cacheKey);

diff --git a/libs/isr/server/src/isr-handler.ts b/libs/isr/server/src/isr-handler.ts
@@ -187,34 +187,46 @@ 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',
-          );
+          if (this.isrConfig.backgroundRevalidation) {
+            this.cacheGeneration.generateWithCacheKey(
+              req,
+              res,
+              cacheKey,
+              config?.providers,
+              'regenerate',
+            );
+          } else {
+            const result = await this.cacheGeneration.generateWithCacheKey(
+              req,
+              res,
+              cacheKey,
+              config?.providers,
+              'regenerate',
+            );
+            if (result?.html) {
+              finalHtml = result.html;
+            }
+          }
        }
      }
+      // Apply the callback if given
+      if (config?.modifyCachedHtml) {
+        const timeStart = performance.now();
+        finalHtml = config.modifyCachedHtml(req, finalHtml);
+        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-->`;
+      }
      return res.send(finalHtml);
    } catch (error) {
      // Cache does not exist. Serve user using SSR